kiss-icon-vue-plugin

这是个webpack的插件，主要是为了线上svg图标的项目服务，将工程里（暂时只处理vue）用到的图标生成对应的css和字体文件。

优点是不需要引用没用到的图标，文件体积减小；也不需要再复制各种图标到本地工程目录。只需要请求远程服务器即可。

核心思想是，新加一个loader，解析出vue文件里需要的svg图标名称，将它们下载到本地目录，再用@vusion/webfonts-generator生成字体和css文件，开发时会在js中引用这个css，打包时会一起写入css文件。

使用说明

# npm
npm i -D kiss-icon-vue-plugin

# yarn
yarn add kiss-icon-vue-plugin --dev

vue-cli创建的工程中使用方法

在vue.config.js中配置plugin与loader, 如果使用TypeScript请在loader参数中添加useTs字段并将其值设置为true,具体参考如下配置。
vue.config.js：

const path = require('path');
const KissIconPlugin = require('kiss-icon-vue-plugin');

module.exports = {
    chainWebpack: config => {
        KissIconPlugin.Util.chainWebpack(config, {
            remotePath: 'https://example/',
            downloadable: ['adjust'],
            useTs: true, //  使用TypeScript
        })
    },
    configureWebpack: {
        plugins: [
            new KissIconPlugin.IconPlugin()
        ]
    }
}

在main.js中导入全局组件
vue2:

import Vue from 'vue'
import KissUIcon from 'kiss-icon-vue-plugin/src/index.vue'
Vue.component('UIcon', KissUIcon);

vu3:

import { createApp } from 'vue'
import KissUIcon from 'kiss-icon-vue-plugin/src/index.vue'
createApp(App).component(
    'UIcon',
    KissUIcon
).mount('#app')

在组件中使用：

<UIcon uinoSvg="affiliatetheme"></UIcon>
<UIcon :uinoSvg="true? 'affiliatetheme' : 'moon'"></UIcon>
<UIcon :uinoSvg="icon"></UIcon>

如果使用:或者v-bind:语法糖请在vue.config.js手动注入所需的svg。

使用自己的组件：

如果想使用自己的icon组件的话，请设置class名为你自己配置的。在配置loader传入的参数中设置prefix为自己的命名(默认为uk)，并且将labelName设置为你自己的组件名(默认为UIcon)，最后设置attributeName(默认为uinoSvg)为你自己图标组件的属性名。

例：
example.vue：

<template>
  <i
      :class="prefix"
      :class="prefix + '_' + attributeName">
  </i>
</template>

<script>
export default {
  name: 'example',
  data(){
    return {
      prefix: 'example',
    }
  },
  props: {
    attributeName: String,
  },
}
</script>

App.vue：

<template>
    <Icon uinoSvg="address_book"></Icon>
    <Icon uinoSvg="ad"></Icon>
</template>

<script>
  import Icon from './components/example.vue';
  export default{
    name: 'App',
    components: {
      "Icon": Icon
    }
  }
</script>

配置项

remotePath

required
Type: string
远程资源服务器的地址，比如http://localhost:4001/ 我们在使用时只需要填入图标名即可，插件会自动填入后缀.svg，目前仅支持svg格式。

downloadable

Type: Array.<string>
额外的图标名称，即这种使用变量的情况，需要把真实的图标名称在这里配置下。

prefix:

Type: String
Default: uk
生成的css的前缀名与图标字体的类名

labelName:

Type: String
Default: UIcon
组件的tag名

attributeName:

Type: String
Default: uinoSvg
给组件传入的属性名称

useTs:

Type: Boolean
Default: false
是否使用了TypeScript

headers:

Type: Object 请求头部信息。

注意：

如果遇到 cannot read property 'parsecomponent' of undefined这个错误，请确定工程中vue与vue-template-compiler版本一致，如果继续报错请检查vue-loader版本是否>=16。

kiss-icon-vue-plugin