@singcl/iconfont-cn

在vue2.x项目中可以使用自定义的 iconfont 图标库。

Motivation

业务需要自定义一批 ICON 在多个系统间共用，多个系统有的是 React 开发的，有的时候 Vue 开发的。React 可以直接使用@antd/icons; 而 Vue2.x 的项目大多没有多没有引入 antd UI，基于此，我从ant-design-vue单独提取出createFromIconfontCN这个功能组件。

使用简介

1. 安装

npm i @singcl/iconfont-cn -S

2. API

| 参数 | 说明 | 类型 | 默认值 | | --------- | ----------------------------------------------------------------------------------- | ----------------------------------------- | ------------ | | type | 图标类型。遵循图标的命名规范 | string | - | | style | 设置图标的样式，例如 fontSize 和 color | CSSProperties | - | | theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 'filled', 'outlined' | 'filled', 'outlined' | 'outlined' | | spin | 是否有旋转动画 | boolean | false | | rotate | 图标旋转角度（1.4.0 后新增，IE9 无效） | number | - | | component | 控制如何渲染图标，通常是一个渲染根标签为 svg 的 Vue 组件，会使 type 属性失效 | ComponentType<CustomIconComponentProps> | - |

3. 使用

import Icon from "@singcl/iconfont-cn";

const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: ["//at.alicdn.com/t/font_1643719_bh60dvbkfv.js"],
});
Vue.component("my-icon", MyIcon);

<my-icon type="iconnew1" style="font-size: 30px"></my-icon>

当然 UMD 模式也是支持的，examples中的示例就是浏览器直接使用。