1.0.7 • Published 2 months ago
@imal1/vite-plugin-iconfont v1.0.7
⚡vite-plugin-iconfont
这是一个自动下载iconfont symbol js到项目的vite 插件,支持以下特性:
- 自动下载iconfont symbol js 到本地。
- 自动生成iconfont json配置。
- 自动生成iconfont TypeScript类型声明文件。
- 支持构建时自动注入index.html。
安装
npm install -D @imal1/vite-plugin-iconfont
// 或
yarn add -D @imal1/vite-plugin-iconfont
// 或
pnpm install -D @imal1/vite-plugin-iconfont
使用方法
添加插件到vite.config.js
import { defineConfig } from 'vite';
import Iconfont from 'vite-plugin-iconfont';
export default defineConfig({
plugins: [Iconfont([{ url: '//at.alicdn.com/t/c/font_3303_220hwi541tl8.js'}])]
});
配置选项(options)
url
iconfont使用symbol引用方式,生成的项目js地址,该参数为主要输入参数。
- Type :
string
- Default : ''
- Required :
true
filePath
保存自动下载iconfont symbol js的public下的路径。
- Type :
string
- Default :
iconfonts
- Required :
false
fileName
- Type :
string
- Default :
${filename}.js
- Required :
false
iconJson
生成iconfont json配置路径,默认文件名称:iconfont.json
。
- Type :
boolean|string
- Default :
false
- Required :
false
inject
iconfont symbol js是否自动注入到index.html
文件。
- Type :
boolean
- Default :
true
- Required :
false
dts
生成TypeScript 类型声明文件,false
不生成,也可以是具体生成类型声明文件的文件路径地址,默认文件名称:iconfont.d.ts
。
- Type :
boolean|string
- Default :
false
- Required :
false
prefix
生成的iconfont symbol js的前缀,为了区分多个 iconfont 中的 id 值。
- Type :
string
- Default : ''
- Required :
false
注意:要获得eslint的支持请在eslint配置文件中增加如下配置:
{
globals: {
Iconfont: true,
},
...
}
示例
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Iconfont from 'vite-plugin-iconfont';
// https://vitejs.dev/config/
export default () => {
return defineConfig({
plugins: [
vue(),
Iconfont([
{
url: '//at.alicdn.com/t/c/font_3303_220hwi541tl8.js',
filePath: 'assets/fonts',
fileName: 'iconfont.js',
iconJson: './public/iconfont.json',
dts: './types/iconfont.d.ts',
inject:false
}
]),
]
});
};