taro-icons-vue

基于 Taro Vue + TypeScript 的小程序图标库，改造自 taro-icons。图标字体和 SCSS 映射沿用原项目，组件实现改为 Vue 3 写法。

特性

• 支持 Taro Vue 项目
• TypeScript 源码与类型声明
• 导出各图标库名称清单，方便搜索和编辑器补全
• 按需引入不同图标库的 SCSS，减少包体积
• 支持 Ionicons、MaterialIcons、MaterialCommunityIcons、FontAwesome

安装

npm install taro-icons-vue --save

使用

在 app.ts 或 app.tsx 中按需导入图标库样式：

import 'taro-icons-vue/scss/MaterialCommunityIcons.scss';
import 'taro-icons-vue/scss/MaterialIcons.scss';
import 'taro-icons-vue/scss/Ionicons.scss';
import 'taro-icons-vue/scss/FontAwesome.scss';

在 Vue 页面或组件中使用：

<script setup lang="ts">
import {
  FontAwesome,
  Ionicons,
  MaterialCommunityIcons,
  MaterialIcons,
} from 'taro-icons-vue';
</script>

<template>
  <MaterialIcons name="settings" :size="24" color="#000000" />
  <MaterialCommunityIcons name="account" :size="32" color="#000000" />
  <Ionicons name="ios-woman" :size="32" color="pink" />
  <FontAwesome family="brands" name="weixin" :size="32" />
</template>

查看图标名称

包内导出了四个图标名称数组，可以在业务项目里搜索、筛选，也可以用来做一个内部图标选择器：

import {
  fontAwesomeIcons,
  ionicons,
  materialCommunityIcons,
  materialIcons,
} from 'taro-icons-vue/iconNames';

console.log(materialIcons.includes('settings'));
console.log(materialCommunityIcons.filter(name => name.includes('account')));
console.log(ionicons.filter(name => name.includes('ios-arrow')));
console.log(fontAwesomeIcons.filter(name => name.includes('weixin')));

也可以导入统一对象：

import { iconNames } from 'taro-icons-vue/iconNames';

console.log(iconNames.MaterialIcons);
console.log(iconNames.MaterialCommunityIcons);
console.log(iconNames.Ionicons);
console.log(iconNames.FontAwesome);

组件的 name prop 已经带有字面量类型，编辑器会提示可用名称：

import type { MaterialIconName } from 'taro-icons-vue';

const iconName: MaterialIconName = 'settings';

FontAwesome 的 family 仍然需要和图标所属字体族匹配，例如品牌图标使用 family="brands"。

MaterialIcons 按需样式

如果只使用少量 MaterialIcons，可以生成一个只包含指定图标 class 的 SCSS：

pnpm run build:material-icons settings,home,search

然后在 Taro 入口中改为引入生成后的文件：

import 'taro-icons-vue/scss/custom/MaterialIcons.scss';

也可以把图标名称写在文件里，支持逗号或换行分隔：

pnpm run build:material-icons -- --from=icons.txt

这个方式会裁剪 .md-xxx:before 映射，字体仍然会使用完整的 MaterialIcons 字体。若要继续压缩到更小，需要再做字体子集化。

Props

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | name | 图标名称 | 对应图标库的名称类型 | 必填 | | size | 图标大小 | number \| string | 24 | | color | 图标颜色 | string | #000000 | | family | FontAwesome 图标族，支持 solid、regular、brands、light | string | solid | | customClass | 附加 class | string | '' | | customStyle | 附加样式 | string \| CSSProperties | - |

开发

npm install
npm run typecheck
npm run build

如果更新了字体文件，可以重新生成 SCSS data 和图标名称清单：

npm run build:data
npm run build:content
npm run build:icons

注意

微信开发者工具中，建议将调试基础库设置为 2.2.3 或以上。