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