1.0.1 • Published 10 months ago

uni-icon v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

uni-icon

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

建议通过npm的方式安装使用

通过引入文件使用(不建议!!!

  1. 解压插件包后,找到dist目录下的文件,复制到项目根目录下的新目录下
  2. 本地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地址;必填
  3. package.json的脚本命令中添加一个命令
      "scripts": {
        // ......
        "icon": "node xxx(在第一步创建的目录名)/bin/uni-icon.js"
      }
  4. 以上步骤完成后,运行npm run icon,会在output路径输入转换后的CSS文件
  5. 然后在UNIAPP的项目中引入对应的类名,(和使用iconfont中的类一样)

通过npm方式

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"
      }
  3. 以上步骤完成后,运行npm run icon,会在output路径输入转换后的CSS文件
  4. 然后在UNIAPP的项目中引入对应的类名,(和使用iconfont中的类一样)

1.0.1

10 months ago

1.0.0

1 year ago