0.0.5 • Published 2 years ago
@singcl/iconfont-cn v0.0.5
@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 -S2. 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中的示例就是浏览器直接使用。