antdv4 Icon 的使用

antdv4 Icon 的使用

正常使用，按需导入

这个就不多说了，需要单独从@ant-design/icons导入，官方都是例子，例如

import { MenuUnfoldOutlined } from '@ant-design/icons';

<MenuUnfoldOutlined />

类型可变，动态设置

主要是想说一下提前不知道需要哪个图标，type 是存在后端或者配置文件中的使用场景，这个时候前端没办法知道需要导入哪些图标
比如这样的场景，菜单栏的图表是路由表中配置的
对于 antd3 来说是很容易的，通过配置 Icon 的 type 即可实现

routes: [
	{
		path: '1',
		name: '1',
		icon: 'iconDashboard',
		component: '',
	},
	{
		path: '2',
		name: '2',
		icon: 'iconEdit',
		component: '',
	},
	{
		path: '3',
		name: '3',
		icon: 'iconTable',
		routes: [
			{
				path: '3.1',
				name: '3.1',
				component: '',
			},
			{
				path: '3.2',
				name: '3.2',
				component: '',
			},
		],
	},
	{
		path: '4',
		name: '4',
		icon: 'iconPreson',
		routes: [
			{
				path: '4.1',
				name: '4.1',
				component: '',
			},
		],
	},
]

方式二需要注意的是如果是在 Menu 中使用 Icon 需要 Menu 的 icon 中添加 anticon 类名（该操作在antd4.6.1的版本是存在的，不知道之后会不会修复）

const RouterIcon: React.FC<RouterIcon> = ({ type }) => {
    return (
        // 必须加上 anticon 的样式，否则 menu 无法处理
        <svg className={`anticon ${styles.icon}`}>
            <use xlinkHref={`#${type}`} />
        </svg>
    );
};

<SubMenu title={item.name} icon={<RouterIcon type={item.icon} />} key={item.key || item.path}>
	<Menu.Item></Menu.Item>
</SubMenu>

<Menu.Item key={item.key || item.path} icon={<RouterIcon type={item.icon} />}>
	<Link to={item.path}>{item.name}</Link>
</Menu.Item>

实际上官方也给出了解决办法

主要是使用 iconfont.cn 来解决，需要在 iconfont.cn 上生成对应文件

方式一

参照官网使用 scriptUrl ，通过设定的 type 来渲染图标，具体的 iconfont.cn 如何添加图标生成 scriptUrl 请移步另一篇: 使用 iconfont.cn 生成 scriptUrl 链接

注意：这种方式虽好，简单，但是是加载的远端 cdn 当你没网的时候或者 cdn 挂了，图标就无法渲染

其中 type 为 iconfont 图标中的这个值，且这个值支持编辑

方式二

下载到本地，这种方式比较保险，不依赖第三方 cdn 和网络，可靠性高
下载的文件内容如下所示，具体用法在这个 html 中讲的很清楚

Unicode 的用法

Font Class 的用法

1. 把所整个文件夹 copy 到项目中，然后引入样式文件，直接使用 span 标签即可
2. 其中的 demo.css 和 demo_index.html 是示例，项目中不需要，可以删掉
   

symbol 的用法