1.1.1 • Published 2 years ago
unplugin-vue-iconfont v1.1.1
unplugin-vue-iconfont
基于 Vue 的 iconfont.cn 封装,支持 vite、webpack
特性
- 只需要填入 iconfont url,就可以自动从 iconfont.cn 导入图标
- 支持和开源组件库直接集成,使用
k-icon
会自动编译为对应 UI 框架的 icon 组件 - 支持直接和 unplugin-vue-components 插件一起使用 (推荐)
自动生成 dts 文件,图标名称支持 ts 类型提示
如何使用
安装 unplugin-vue-iconfont
npm install unplugin-vue-iconfont --save-dev
基于 vite
import path from 'path';
import { defineConfig } from 'vite';
import Iconfont from 'unplugin-vue-iconfont/vite';
export default defineConfig({
plugins: [
Iconfont({
dts: true,
type: 'svg',
scriptUrls: ['//at.alicdn.com/t/font_3151940_2yxtpj63qfk.js'],
}),
],
});
基于 webpack
const Iconfont = require('unplugin-vue-iconfont/webpack');
module.export = {
plugins: [
new Iconfont({
dts: true,
type: 'svg',
scriptUrls: ['//at.alicdn.com/t/font_3151940_2yxtpj63qfk.js'],
}),
],
};
和 unplugin-vue-components 集成
import path from 'path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import { IconResolver } from 'unplugin-vue-iconfont';
import Iconfont from 'unplugin-vue-iconfont/vite';
import Components from 'unplugin-vue-components/vite';
export default defineConfig({
plugins: [
Vue(),
Iconfont({
dts: true,
type: 'svg',
scriptUrls: ['//at.alicdn.com/t/font_3151940_2yxtpj63qfk.js'],
}),
Components({
dts: true,
resolvers: [IconResolver()],
}),
],
});
开源组件支持
现目前支持开源 UI 组件库为
- vant
- ant design vue
- naive-ui