更新记录

1.0.0(2023-01-11)

  1. 功能完成

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问