Taro 使用 Iconfont 字体图标

Taro 使用 iconfont

1. 使用库 "taro-iconfont-cli"
2. iconfont 创建项目 使用 symbol 模式 获取 网络地址：//at.alicdn.com/t/c/font_xxxxxxxxxxx.js
3. 使用命令行 npx iconfont-init 在 项目根目录 创建 iconfont.json

// 注意："save_dir": "./src/components/iconfont", 是存放 iconFont 组件的位置, platforms指的是 平台
{
    "symbol_url": "//at.alicdn.com/t/c/font_xxxxxxxxxxx.js",
    "save_dir": "./src/components/iconfont",
    "use_typescript": true,
    "platforms": ["weapp"],
    "use_rpx": true,
    "trim_icon_prefix": "icon",
    "default_icon_size": 36,
    "design_width": 750
}

4. 命令行执行

cmd 执行：
npx iconfont-taro 在 save_dir 的位置 生成一份 iconfont组件

5. 配置补充 - src/app.config.ts === 使用 命令行生成的 文件 引入进配置中

 import { useGlobalIconFont } from './components/iconfont/helper';
 
 ...
 
 export default defineAppConfig({
 
     ...
     
     usingComponents: {
       ...Object.assign(useGlobalIconFont()),
     },
 })
 

6. 使用

import IconFont from "@/components/iconfont";

<IconFont name='fuzhi' color={color} size={size} />