Need help with taro-iconfont-cli?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iconfont-cli
247 Stars 31 Forks MIT License 94 Commits 33 Opened issues

Description

在Taro框架中使用iconfont图标,支持多端,支持多色彩,不依赖字体。

Services available

!
?

Need anything else?

Contributors list

taro-iconfont-cli

在Taro框架中使用iconfont图标,不依赖字体,支持多色彩。

支持平台

  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 头条小程序
  • QQ小程序
  • H5

特性

1、一键生成标准组件,多端支持
2、使用方便,import即可
3、支持多色彩
4、支持自定义颜色
5、支持es6和typescript两种模式

Step 1

安装插件

如果您使用Taro2.x,请安装

[email protected]
,并阅读旧版的README.md

# Yarn
yarn add taro-iconfont-cli --dev

Npm

npm install taro-iconfont-cli --save-dev

Step 2

生成配置文件 ```bash npx iconfont-init

可传入配置输出路径

npx iconfont-init --output iconfont.json

此时项目根目录会生成一个`iconfont.json`的文件,内容如下:
```json
{
  "symbol_url": "请参考README.md,复制 http://iconfont.cn 官网提供的JS链接",
  "save_dir": "./src/components/iconfont",
  "use_typescript": false,
  "platforms": "*",
  "use_rpx": true,
  "trim_icon_prefix": "icon",
  "default_icon_size": 18,
  "design_width": 750
}

配置参数说明:

symbol_url

请直接复制iconfont官网提供的项目链接。请务必看清是

.js
后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库,那么可以填入这个链接去测试:
http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js


save_dir

根据iconfont图标生成的组件存放的位置。每次生成组件之前,该文件夹都会被清空。

use_typescript

如果您的项目使用Typescript编写,请设置为true。这个选项将决定生成的图标组件是

.tsx
还是
.js
后缀。

当该值为false时,我们会为您的图标生成

.js
.d.ts
两个文件,以便您能享受到最好的开发体验。

platforms

选择需要支持的平台,默认是

*
,意味着所有平台都需要支持(如果有)。如果你只想支持部分平台,也可以设置成数组:
json5
{
  // 选择你需要的平台
  // 说明 =>  weapp: 微信  |  swan: 百度  |  alipay: 支付宝  |  tt: 字节跳动
  "platforms": ["weapp", "swan", "alipay", "h5", "tt", "qq"]
}

use_rpx

是否使用尺寸单位rpx还是普通的像素单位

px
。默认值为true,与Taro保持一致的缩放。您也可以设置为false,强制使用
px

design_width

use_rpx: true
且当前设计图尺寸不为 750 时,可以通过修改这个字段来修改设计尺寸。

trimiconprefix

如果你的图标有通用的前缀,而你在使用的时候又不想重复去写,那么可以通过这种配置这个选项把前缀统一去掉。

defaulticonsize

我们将为每个生成的图标组件加入默认的字体大小,当然,你也可以通过传入props的方式改变这个size值。

Step 3

开始生成Taro标准组件 ```bash npx iconfont-taro

可传入配置文件路径

npx iconfont-taro --config iconfont.json

生成后查看您设置的保存目录中是否含有所有的图标


在生成代码之前,你可以顺便参考snapshots目录自动生成的快照文件。

Step 4

由于Taro3.0的架构变更,您需要在src/app.config.js下填写一次usingComponents

```typescript // src/app.config.js import { useGlobalIconFont } from './components/iconfont/helper';

export default { usingComponents: Object.assign(useGlobalIconFont()), }

这并不是一个多好的方案,毕竟还需要开发者关注这个细节。也许能用webpack的plugin解决或者等官方推出更好的方案,有任何更好的idea欢迎提供。

使用

在Page中使用图标 ```jsx harmony import React, { Component } from 'react'; import IconFont from '../components/iconfont';

class App extends Component { render() { return ; } }

export default App;

更多用法:
jsx harmony // 原色彩

// 单色:红色

// 多色:红色+橘色

// 不同格式的颜色写法

// 与文字对齐 Hello ```

更新图标

当您在iconfont.cn中的图标有变更时,只需更改配置

symbol_url
,然后再次执行
Step 3
即可生成最新的图标组件 ```bash

修改 symbol_url 配置后执行:

npx iconfont-taro ```


欢迎使用,并给我一些反馈和建议,让这个库做的更好

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.