1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Ant Design 自定义离线图标

Ant Design 自定义离线图标

时间:2021-03-31 09:54:10

相关推荐

Ant Design 自定义离线图标

网上找了很多解决方案都是针对Antd 旧版本,通过自己摸索,终于搞定……话不多说,直接贴图上代码

我的环境

Ant Design Pro 2.2.1

Antd:3.13.6

创建图标

Ant Design自带了一些图标,这个地址可以查看(https://ant.design/components/icon-cn/),但是符合项目中的图标很少,需要自己去设计或者去网上下载字体图标,这里推荐去这个网站下载自己想要的图片,具体操作请参考这个网友的博客/p/2934316a5899

但值得注意的是,在新建项目的时候看下图说明,因为人家博客中的可能是低版本的做法,当然你FontClass前缀不取名icon-也是可以的,只不过要改改框架的代码,否则识别不了图标。

使用图标

这里使用图标有两种方式,

1、在线使用字体

将这个地址复制到你项目中

module.exports = {navTheme: 'dark', // theme for nav menuprimaryColor: '#1890FF', // primary color of ant designlayout: 'sidemenu', // nav menu position: sidemenu or topmenucontentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenufixedHeader: false, // sticky headerautoHideHeader: false, // auto hide headerfixSiderbar: false, // sticky siderbarmenu: {disableLocal: false,},pwa: true,// your iconfont Symbol Scrip Url// 注意:如果需要图标多色,Iconfont图标项目里要进行批量去色处理iconfontUrl: '///t/font_1058494_nw4mdj6da9e.js'};

在组件中使用

引入

import IconFont from '@/components/IconFont';

使用

<IconFont type="icon-ctl-term" />;

import React from 'react';import { connect } from 'dva';import { Icon, Row } from 'antd';import IconFont from '@/components/IconFont';function IndexPage() {return (<div style={{ fontSize: 30 }}><Row type="flex" align="middle" justify="center"><span>默认字体:</span><Icon type="apple" /><Icon type="windows" /><Icon type="android" /></Row><Row type="flex" align="middle" justify="center"><span>自定义字体:</span><IconFont type="icon-ctl-term" />;</Row></div>);}IndexPage.propTypes = {};export default connect()(IndexPage);

效果

2、离线使用自定义字体

正确应该是这么引用本地文件

iconfontUrl: require('../public/fonts/iconfonts/iconfont.js')

先按前面那位博主介绍的将字体下载到本地然后在defaultSettings.js这个配置文件中更改iconfontUrl值为你存放在项目中的相对路径这里值得注意的是defaultSettings.js文件在src目录下所有引用本地文件需要import或require否则就无需,浏览器控制台还会报错

框架中左侧菜单栏具体使用图标代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。