jeepeng / taro-icons

基于 Taro 的小程序图标库

taro-icons

基于 Taro 的小程序图标库

特性

• 按需加载，根据自身需要选择加载不同的图标库，减少包大小
• 大约 6700 个 icon 可供选择

支持的图标库:

• Ionicons (v4.5.5, 696 icons, ～134KB)
• MaterialIcons (v3.0.1, 935 icons, ～112KB)
• MaterialCommunityIcons (v3.5.95, 3596 icons, ～495KB)
• FontAwesome (v5.8.1, 1513 icons, ~322KB)

安装

npm install taro-icons --save

使用

在 app.js 中导入你需要的图标库scss 文件，如 MaterialIcons:

// app.js
// 请根据需要选择导入的 scss，这里全部导入
import 'taro-icons/scss/MaterialCommunityIcons.scss' // 495KB
import 'taro-icons/scss/MaterialIcons.scss' // 112KB
import 'taro-icons/scss/Ionicons.scss' // 134KB
import 'taro-icons/scss/FontAwesome.scss' // 322KB

然后在需要用到图标的地方引入对应d的component使用:

import {
  MaterialIcons,
  MaterialCommunityIcons,
  Ionicons,
  FontAwesome,
} from 'taro-icons';
...

<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} />

其中name必填，可以在对应的网站上找到
具体用法请参考 example

Icon props

属性	说明	类型	默认值
name	需要显示的图标名称，可以在对应图标库网站找到	String
size	图标大小（px）	Number	24
color	图标颜色	String	#000000
family	FontAwesome 特有属性(solid、regular、brands)	String	solid

⚠️注意事项

在微信开发者工具中，选择 设置 -> 项目设置 -> 调试基础库，设置版本2.2.3及以上，图标才能正常显示

taro-icons's Issues

可以帮忙升级 material design 的icon吗？

非常感谢！

可以帮忙import ionic v5吗？

多谢！

尝试了一下h5，没有跑起来

尝试了一下h5，没有跑起来报 Super expression must either be null or a function, not undefined错误。

尝试了百度、支付宝、头条三端都可以用的

另外一种集成 micon的方案

yarn add material-design-icons
// index.tsx
import "material-design-icons/iconfont/material-icons.css";

// util/icon.tsx
import { Text } from "@tarojs/components";

const MIcon = ({ name, color = PRIMARY_COLOR, size = 24 }: any) => <Text className='material-icons' style={{
  color: color,
  fontSize: size,
  width: size
}}
>{(name || '').replace(/-/g, '_')}</Text>

export { MIcon };

请问作者有没有时间方便升级下 material design icons？非常感谢