uni-iconfont-plugin
v1.0.3
Published
让uni-app支持iconfont图标以Symbol方式引入使用,支持彩色图标,兼容全平台
Downloads
14
Maintainers
Readme
uni-iconfont-plugin
让uni-app支持iconfont图标以Symbol方式引入使用,支持彩色图标,兼容全平台。
暂不支持
nvue
uni-app已经支持iconfont图标,为什么还需要这个插件?
uni-app支持以字体的方式引入图标,但是图标只能是单色,且需要依赖字体文件。
优势
组件化
支持px、rpx等样式单位
渲染彩色图标
执行命令更新
快速开始
安装插件
# npm
npm install uni-iconfont-plugin -D
or
# yarn
yarn add uni-iconfont-plugin -D
or
#pnpm
pnpm install uni-iconfont-plugin -D
生成配置文件
npx iconfont-init
# 可传入配置文件输出路径
# npx iconfont-init --output iconfont.json
# 可只传入配置文件名
# npx iconfont-init --output icon
#会生成icon.json
在根目录下会生成一个iconfont.json
的配置文件:
{
"symbol_url": "请参考README.md,复制 http://iconfont.cn 官网提供的JS链接,或提供本地iconfont的JS地址,例:./iconfont.js",
"save_dir": "./src/iconfont",
"trim_icon_prefix": "icon",
"default_icon_size": "32rpx"
}
配置文件说明
symbol_url: 请直接复制iconfont官网提供的项目图标Symbol链接或提供本地iconfont的JS地址,例:'./iconfont.js'。测试链接:http://at.alicdn.com/t/font_2662316_eabpkqkyqt8.js
save_dir 生成的icon文件保存目录。每次生成前,都会清空该目录。
trim_icon_prefix 去除前缀,默认为icon
。
default_icon_size 默认图标大小,默认为32rpx
,必须带单位。支持px、rpx、em, rem等css常用单位。
生成icon文件
npx iconfont-uni
# 可传入配置文件路径
# npx iconfont-uni --config iconfont.json
执行成功后可以在您设置的保存目录下找到生成的icon文件。
使用图标
在页面中引入组件使用:
<template>
<view>
<iconfont name="bangbangtang" size="30rpx" fill="#000000"></iconfont>
...
</view>
</template>
<script>
import iconfont from '../../iconfont/iconfont.vue' // 文件名默认为iconfont.vue
...
</script>
更新图标
图标有变化时,只需更改配置文件的symbol_url,然后重新生成icon文件即可。
# 修改symbol_url配置后执行
npx iconfont-uni