TStoneLee / uni-icon

uniapp项目中,使用阿里图标库一样引入svg图标

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

uni-icon

在UNIAPP项目中,引入阿里图标库,但是无法使用svg图标,uni-icon可以在本地进行转换,可以像阿里图标库引入图标那样,在小程序H5引入svg图标,无需添加任何组件

Installation


npm install uni-icon -D

Usage


  1. 本地UNIAPP项目的根目录下创建一个unicon.config.js配置文件,符合CommonJS格式
    module.exports = {
       output: 'src/static/icon/iconfont.css',
       singleColorSvg: [],
       url: '//at.alicdn.com/t/c/font_2719016_pki5wig395f.js'
    }
    字段解释:
    output:转换生成后的css文件,输出的路径,写法要符合Unix的规范;必填
    singleColorSvg:单独进行转换的单色svg图标;选填
    url:在阿里图标库的项目中,Symbol按钮生成的图标CDN地址;必填
  2. package.json的脚本命令中添加一个命令
  "scripts": {
    // ......
    "icon": "uni-icon"
  }
  1. 以上步骤完成后,运行npm run icon,会在output路径输入转换后的CSS文件
  2. 然后在UNIAPP的项目中引入对应的类名,(和使用iconfont中的类一样)

About

uniapp项目中,使用阿里图标库一样引入svg图标

License:MIT License


Languages

Language:JavaScript 100.0%