乐趣区

关于node.js:Kiss-Iconfont

装置 iconfontcn

npm install -g iconfontcn

iconfontcn 有什么用

  1. 简化 iconfont 的应用
  2. 提供了更灵便的 Icon 组件

iconfont 是什么?

阿里妈妈 MUX 倾力打造的矢量图标治理、交流平台,设计师将图标上传到 iconfont 平台,用户能够自定义下载多种格局的 icon,平台也可将图标转换为字体,便于前端工程师自在调整与调用。

iconfont 的 Web 端应用形式

https://www.iconfont.cn/help/…

  1. unicode 援用
  2. font-class 援用
  3. symbol 援用,全新的应用形式,将来的支流

通过 iconfontcn 应用 iconfont

  1. 查看 iconfont 我的项目的 Font Family、FontClass/Symbol 前缀信息

    iconfont.cn > 资源管理 > 我的我的项目 > 更多操作 > 编辑我的项目

  2. 查看 iconfont 我的项目的 Font class/Symbol

    iconfont.cn > 资源管理 > 我的我的项目 > Font class / Symbol

  3. 我的项目 index.js 中初始化 iconfontcn(只须要初始化一次)

    import Iconfont from "iconfontcn";
    
    // init 参数阐明
    //Iconfont.init("Font class/Symbol 地址", "FontClass/Symbol 前缀", "Font Family");
    
    // font-class 援用
    Iconfont.init("font_2043983_voy5aew0vz.css", "t-", "testfont");
    
    // symbol 援用
    Iconfont.init("font_2043983_voy5aew0vz.js", "t-");
  4. Icon 组件属性和应用

    属性名 类型 阐明
    code string 图标的代码
    size number,string 图标的大小,优先级最高
    color string 图标的色彩,优先级最高
    style object 行内款式,优先级第二
    className string 内部援用 css,优先级第三
    import {Icon} from "iconfontcn";
    
    <Icon code="offer" size="18"/>

不通过 iconfontcn 加载 js 或 css,应用 Icon 组件

如果我的项目中应用本地资源或者在 index.html 中加载了 iconfont 的 css 或 js,也能够应用 iconfontcn 的 Icon 组件,须要在 index.js 中配置 iconfontcn(只须要配置一次),留神 iconfont 的援用形式。

import Iconfont from "iconfontcn";

// config 参数阐明
//Iconfont.config("i | svg", "FontClass/Symbol 前缀", "Font Family");

// font-class 援用,第一个参数传 i
Iconfont.config("i", "t-", "testfont");

// symbol 援用,第一个参数传 svg
Iconfont.config("svg", "t-");
import {Icon} from "iconfontcn";

<Icon code="offer"/>

Hope you will like !

退出移动版