background

In projects, we usually use many icon ICONS, including PNG, SVG or CSS, each of which has its own advantages and disadvantages

  • png: controlled by color, size, oneiconIf the color or size of the image is changed, it needs to be remade. Under the HD screen, the image will be distorted greatly, and each image is a file, occupying the requested resources (of course, this can be solved by using Sprite image, but when it is combined into a large image, it may be slow to load).
  • css: Mainly because of the complexity of writing, sometimes more than ten lines may be written to achieve an iconcssCode, or even dozens of lines
  • svg: It is not controlled by the color, size, can arbitrarily change the color, size, and not distortion, but the disadvantage is to use more trouble

This paper is optimized for the use of SVG. The realization of Icon component library in this paper is based on vue2. X and WebPack4.x.

The preparatory work

Install Vue, webpack or use VUE-cli3. x directly to create a Vue project. For convenience, I used vue-CLI to create a Vue project

vue create my-app
cd my-app
npm run dev
Copy the code

So we create a project first and then need to make the following adjustments to the project:

  • 1, Create a directory for SVG, create a new directory for ASstes /icon under SRC, and store all needed SVG in the west.
  • 2. Create the vue configuration file vue.config.js in the root directory of the project
  • 3. In the Components directory, create svgicon. vue, which is an SvgIcon component that stores the SVG we need
  • 4. Create the utils folder in SRC and create index.js under it. Here are the common utility functions used in the project
// List only the main directory structureMy-app │.eslintrc │.gitignore │ babel.config.js │ package-lock.json │ package.json │ readme.md │ vue// 1. Add the configuration├─public │ ├─ favicon. Ico │ index.html ├─ SRC │ ├.vue │ main// save the svG-icon│ │ add.svg │ search.svg │ ├─ Components │ SvgIcon// 3, svG-icon component├ ─ utils │ index. Js// 4. Tools and methods└ ─ views About. Vue Home. VueCopy the code

Start processing

  • 1, first configure the rules of Webpack, because vue-CLI has default webpack configuration, we need to modify the default configuration, vue.config.js is an optional configuration file provided by VUe-CLI, and also introduce three configuration modes of Webpack, as follows:
// vue.config.js
const path = require('path')
const resolve = dir= > path.join(__dirname, dir)
module.exports = { 
    lintOnSave: process.env.NODE_ENV ! = ='development'.// Object mode
    // configureWebpack: {
    // resolve: {
    // alias: {
    // comps: resolve('/src/components')
    / /}
    / /}
    // },
    // Second: function mode
    // configureWebpack: (config) => {
    // config.resolve.alias.comps = resolve('/src/components')
    // if (process.env.NODE_ENV === 'development') {
    // console.log('dev---')
    // config.name = 'development environment'
    // } else {
    // config.name = 'formal environment'
    / /}
    // },
    Since vue-CLI installs the ChainWebPack third-party plug-in by default, you can use the ChainWebPack configuration, which implements chain calls
    chainWebpack(config) {
    	// Give components an alias. To use components under components, import XXX from '/comps' to import components under components
        config.resolve.alias.set('comps', resolve('/src/components'))
        // Since the default vuE-CLI configuration handles SVG, you need to find the corresponding SVG rule here and make the default SVG rule exclude processing SVG in the SRC /assets/icon directory
        config.module.rule('svg')
            .exclude.add(resolve('src/assets/icon'))
        // Use our own iocNS rules for SVG in SRC /assets/icon
        config.module.rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icon')).end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]' // #icon-user.svg}}})Copy the code
  • 2. The Svgicon. vue component places all of our SVG content (usually fromiconfontCopy SVG content as follows:
// SvgIcon.vue
<template>
    <svg :class="svgClass" v-on="$listeners"> 
        <use :xlink:href="fullIconName"></use>
    </svg>
</template>

<script>
export default {
    name: 'SvgIcon'.props: {
        iconName: {
            type: String.require: true
        },
        className: {
            type: String.require: true}},computed: {
        fullIconName () {
            return `#icon-The ${this.iconName}`
        },
        svgClass () {
            return this.className ? `svg-icon The ${this.className}` : 'svg-icon'}}}</script>

<style lang="postcss">
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
}
</style>
Copy the code
  • 3. Now that we have the SVG-Icon component, we can import it if we want to use it. However, if multiple pages need to use it, each page needs to import this component, which is very troublesome. Write the code to register the global component in utils/index.js as follows:
// main.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
// 1, automatically load icon/*.svg file
// Gets a requie function for the specified context
const req = require.context('.. /assets/icon'.false./\.svg$/)
req.keys().map(req)
// 2. Global Icon component of the ancestor volume
Vue.component('svg-icon', SvgIcon)
Copy the code
  • 4. Introduce public methods in main.js
import Vue from "vue"; import App from "./App.vue"; Import "@/utils" // import the public method vue.config. productionTip = false in the project; new Vue({ router, store, render: h => h(App) }).$mount("#app");Copy the code
  • 5. Using the SVG-icon component, let’s try app.vue
// App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">
        <! - before using SVG way < SVG > < use xlink: href = "# icon - user" > < / use > < / SVG > -- >
        <! -- Now use SVG -->
        <svg-icon icon-name='user'></svg-icon>
        Home
      </router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>
Copy the code