UMI 使用 icon

icons(重点)

icon 合集: https://icones.js.org/

具体支持哪个图标库鼠标放到 icon 属性上面即可出现

<Icon icon="ant-design:alipay-circle-filled" width="50" height="50" />

icon 合集使用

在 umi 配置文件设置，开启 icons 功能，并允许自动安装图标库。

 // config.development.js
  icons:{
    autoInstall: {
      "@iconify-json/ant-design": true, //自动安装@iconify-json/ion(换成你自己的)
    },
    include: ["ant-design:alipay-circle-filled"], // 按需加载要使用的必须把icon类名加到include中，否则无法使用
  },

使用

import { Icon } from "umi";
<Icon icon="ant-design:alipay-circle-filled" width="50" height="50" />;

本地 icon 使用

在 umi 配置文件设置，开启 icons 功能。

本地 svg icon 的使用需要把 svg 保存在 src/icons 目录下，然后通过 local 这个前缀引用

比如在 src/icons 目录下有个 umi.svg，然后可以这样引用。

import { Icon } from "umi";
<Icon icon="local:umi" />;

配置项介绍

autoInstall 表示是否自动安装 icon 集；tnpm/cnpm 客户端暂不支持，但可以通过手动按需安装对应 icon 集合包 @iconify-json/collection-name 。参考：Icon 集合列表, collection-name 为列表中的 Icon set prefix 项。
alias 用于配置 icon 的别名，比如配置了 alias:{home:'fa:home'} 后就可以通过 icon="home" 使用 fa:home 这个 icon 了
include 表示要使用的 icon，比如 include:['fa:home','fa:star'] 就表示只使用 fa:home 和 fa:star 这两个 icon，其他 icon 将不会被打包进最终的产物中。

Icon 组件属性

icon，指定 icon
width，svg 宽度
height，svg 高度
viewBox，svg viewBox
style，外部容器样式
className，外部容器样式名
spin，是否自动旋转
rotate，配置旋转角度，支持多种格式，比如 1，"30deg"、"25%" 都可以
flip，支持 vertical、horizontal，或者他们的组合 vertical,horizontal

UMI 使用 icon ​

icons(重点) ​

icon 合集使用 ​

本地 icon 使用 ​