README
kiss-font-plugin
这是个webpack
的插件,主要是为线上svg
图标的项目服务,将工程里(暂时只处理vue
)用到的图标生成对应的css
和字体文件。
优点是不需要引用没用到的图标,文件体积减小;也不需要再复制各种图标到本地工程目录。只需要你有个服务器存放你需要的svg
图标。
核心思想是,新加一个loader
,解析出vue
文件里需要的svg
图标名称,将它们下载到本地目录,再用@vusion/webfonts-generator
生成字体和css
文件,开发时会在js
中引用这个css
,打包时会生成一个额外的字体文件。
安装使用
npm i -D kiss-font-plugin
# 或者使用yarn
yarn add kiss-font-plugin --dev
vue-cli创建的工程中使用方法
仅测试了版本4,如果将来内置的html-webpack-plugin
升级,还需要修改,因为API有修改。
vue.config.js
const kissFontPlugin = require("kiss-font-plugin");
module.exports = {
chainWebpack: (config) => {
kissFontPlugin.utils.chainWebpack(config);
},
configureWebpack: {
plugins: [
new kissFontPlugin.Plugin(),
]
},
}
默认会注入vue
图标组件,代码如下:
import KissFont from 'kiss-font-plugin/src/index.vue';
Vue.component('UIcon', KissFont);
如果要用自己的,可以将上述vue.config.js
中chainWebpack
修改为:
kissFontPlugin.utils.chainWebpack(config, {isAutoJnjectComponent: false});
经测试,vue3.0
因为vue
的使用方式是这样的:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
不符合我们的注入条件,所以,必须禁止注入,手动在main
文件中,这样写:
import { createApp } from 'vue'
import App from './App.vue'
import KissFont from 'kiss-font-plugin/src/index.vue'
createApp(App)
.component('UIcon', KissFont)
.mount('#app')
在vue文件中使用
<div class="icons">
<UIcon name="go"/>
<UIcon class-name="bug-icon" name="bug" @click="test"/>
<UIcon :name="dragIcon" />
<UIcon :name="!isTest ? 'money': 'message'" />
<UIcon :name="isTest ? 'lock': 'form'" />
</div>
其中,标签名称,默认是UIcon
,可以配置文件中修改。
name
是图标的名称。- 支持三元表达式,但必须是字符串,也就是说带单引号,也必须是
:name
,未做v-bind:name
的支持。 - 如果
name
是变量,我们无法监测是什么,所以对应的图标,需要在以下配置文件中配置。
- 支持三元表达式,但必须是字符串,也就是说带单引号,也必须是
class-name
是设置的class
名称。- 可以添加自定义事件,示例中是
click
事件。
配置文件
在工程根目录下,增加一个文件kiss.font.config.js
,内容如下:
module.exports = {
remotePath: 'http://localhost:4001',
files: [
'chart',
'skill',
'list'
]
};
也可以在创建插件时注入,如:
new kissFontPlugin.Plugin({
remotePath: 'http://localhost:4001',
}),
配置项
remotePath
required
Type: string
远程资源服务器的地址,比如http://localhost:4001/go.svg
可以访问一个图标。
files
Type: array.<string>
额外的图标名称,即<UIcon :name="dragIcon" />
这种使用变量的情况,需要把真实的图标名称在这里配置下。
componentTag
Type: string
Default: 'UIcon'
组件标签名称
webfontDir
Type: string
Default: 'webfont'
打包时字体和css
所在的文件夹名称
fontName
Type: string
Default: 'uk'
生成的字体名称
classPrefix
Type: string
Default: 'uk-'
类前缀。比如图标go.svg
,生成css
样式为uk-go
baseSelector
Type: string
Default: '.uk'
基类选择器,默认会生成一个.uk
的类
types
Type: array<string>
Default: ['woff2']
生成字体文件的类型。
可选的类型有: svg, ttf, woff, woff2, eot
cssFileName
Type: string
Default: 'uk'
生成的css
文件名称,它只能在plugin
中修改。如new kissFontPlugin.Plugin({cssFileName: 'test'})
TODO
- 支持
html-webpack-plugin
版本4