Skip to content

iconfont,小程序彩色图标方案,小程序彩色iconfont生成工具

Notifications You must be signed in to change notification settings

LlanHao/iconfont-tools

 
 

Repository files navigation

iconfont-tools

适用于 iconfont 彩色图标的提取

drawing drawing drawing drawing

特性

  • 生成原生通用组件 icon
  • 生成夸平台可用的 iconfont-weapp.css 文件
  • 本地生产,也可以远程生成

如何安装

方式一:

需要下载,iconfont 的字体文件包,将其解压

npm i -g iconfont-tools

cd project/asset/font_hiytajitqeu // 进入图标文件所在文件夹

iconfont-tools  // 生成小程序专用文件

方式二:

无需下载字体包,但是需要在 iconfont 生成在线链接

drawing

npm i -g iconfont-tools

# 复制在线链接 //at.alicdn.com/t/font_717026_fqwb5om0rvk.js

iconfont-tools --form //at.alicdn.com/t/font_717026_fqwb5om0rvk.js --to ./output/dir-path

参数:

  • --form: iconfont 在线链接
  • --to: 生成目标路径,可以是绝对路径,也可以是相对路径。 dome: /home/chr/project/style 、 ./style

小程序 如何使用

  • 1.直接引用样式
<view class="t-icon t-icon-your-iconName"></view>
  • 2.使用组件 icon

page.json

{
  "usingComponents": {
    "icon": "/path/to-icon/icon"
  }
}

page.wxml

<icon name="IconName" size="{{24}}"></icon>

实现原理

click

演示

img

About

iconfont,小程序彩色图标方案,小程序彩色iconfont生成工具

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 61.8%
  • TypeScript 13.3%
  • CSS 12.6%
  • HTML 12.3%