Icon 图标

Icon 图标资源

1. @ant-design/icons
2. react-icons
3. @mui/icons-material
4. iconic https://iconic.app
5. font awesome
6. icomoon.io 自定义 svg icon
7. 线性图标

   yarn add @ant-design/icons
   yarn add react-icons
   yarn add @mui/icons-material

   维护一套图标字体，icon本质上还是字体，ttf，woff，woff2
   支持彩色，渐变，通过 css来控制样式

引入图标的方式

1. img标签
   1. 最简单的方案，直接当做图片一如，每个图标就是一张图片
   2. 缺点：额外的网络请求
2. css background-image
3. icon-font
4. svg
   1. symbol， use外链 svg
   2. use标签，可重复调用，支持跨 svg调用
5. svg-sprites 精灵图
   1. 减少 http请求次数
   2. 通过 background-position加载指定位置的图标
   3. 多色渐变图标，还是使用 svg-sprites

为了减少图标的网络请求，把图标合并到一个图标的集合，通过定位算法来加载具体的图标

• iconfont使用了 unicode定位
• svg-sprites使用 backgruond-position，x,y坐标来定位

iconic Icons

https://iconic.app

material Icons

https://mui.com/material-ui/material-icons
https://www.npmjs.com/package/@mui/icons-material
2,100+ ready-to-use React Material Icons

icon 组件

Icon 组件封装 antd4x图表，通过字符串，渲染对应的图标

import React from "react"
import * as ICONS from '@ant-design/icons'
export function Icon({type, ...rest}) {
  if (!type) return null;
  return React.createElement(ICONS[type], rest);
}
// 组件使用
<MenuItem 
  key={item.key} 
  icon={<Icon type={item.icon} />}
>
    {item.name}
</MenuItem>
// menu菜单数据格式
const menu = [
  {
      name: '',
    icon: '',
    component: '',
    path: ''
  }
]
React.createElement(type, [props], [...children])

使用后台返回的icon 字符串，渲染成 Icon组件
createElement https://blog.csdn.net/s1879046/article/details/115427634

svg封装

svg 必须加上 anticon 的样式，否则 menu 无法处理

const SvgIcon: React.FC<RouterIcon> = ({ type }) => {
  return (
    <svg className={`anticon ${styles.icon}`}>
            <use xlinkHref={`#${type}`} />
      </svg>
    )
}
<Menu.Item key={item.key ?? item.path} icon={<SvgIcon type={item.icon} />}>
    <Link to={item.path}>{item.name}</Link>
</Menu.Item>

scriptUrl

编辑器 Icon图标