How to use SVG elegantly in a VUE project

1. Basic introduction

• The purpose of this article is to show you how to configure and easily use SVG ICONS in your projects.
• This article uses the VUE project as an example. Of course, the principle of react is similar.
• SVG ICONS can be used directly with the IMG tag or as ICONS.
• This article is a reference to Xin Xu’s article: SVG Sprite technology introduction.
• Github: Github address.

2, configuration,

1. Install SVG – Sprite – loader. By default, projects created using vue-CLI scaffolding use urL-loader to process SVG, so you need to:

{
    test: /\.(png|jpe? g|gif|svg)(\? . *)? $/, loader:'url-loader',
    options: {
      limit: 10000,                                      
      name: utils.assetsPath('img/[name].[hash:7].[ext]')}}Copy the code

2. CNPM I -D SVG-sprite-loader Create a new SVG folder under static to place the SVG used as icon. Use include,include and img to distinguish between them. Then modify the webpack.base.conf.js configuration so that svG-sprite-loader will only process files under static/ SVG that we specified:

  {
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('static/svg')], // include => only files in the specified folder options: {symbolId:'icon-[name]'}}, {test: /\.(png|jpe? g|gif|svg)(\? . *)? $/, loader:'url-loader',
    exclude: [resolve('static/svg')], // exclude => exclude files from the specified folder.limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')}}Copy the code

3, use,

1. Create the SVG folder under Components and create the svg. vue file:

  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
Copy the code

2. Create the svgConfig folder under the utils folder, create the index.js file, and globally register the SVG-icon component.

Vue.component('svg-icon', SvgIcon)
Copy the code

3. Use require.context to automatically import files without importing them one by one:

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('. /.. /.. /.. /static/svg/'.true, /\.svg$/)
requireAll(req)
Copy the code

import '@/utils/svgConfig'
Copy the code

Here we can use it directly in the project:

<svg-icon icon-class="users" />
Copy the code

4, to optimize

• Although SVG-icon can be used now, it is still difficult to distinguish SVG intuitively. When there are many SVG files, it will take time and effort to find them one by one. To make it easier to find and use SVG, create a new SVG list page.

1. Create SvgList. Vue file under Pages file, iconsMap is the array of imported SVG files, handleClipboard is the method of click copy, by installing clipboard (CNPM i-s clipboard) :

<div class="icons-wrapper">
  <div v-for="item in iconsMap" :key="item" @click="handleClipboard(generateIconCode(item), $event)">
    <el-tooltip placement="top">
      <div slot="content">
        {{generateIconCode(item)}}
      </div>
      <div class="icon-item">
        <div>
          <span class="svg-wrap" @click.stop>
            <svg-icon :icon-class="item" />
          </span>
        </div>
        <span>{{item}}</span>
      </div>
    </el-tooltip>
  </div>
</div>
Copy the code

2. Get iconsMap, create svgConfig folder in utils folder, generateIconsview. js file, of course if you use vuex, you can also save it in state in vuex:

const data = {
  state: {
    iconsMap: []
  },
  generate (iconsMap) {
    this.state.iconsMap = iconsMap
  }
}

export default data
Copy the code

3. Save data in iconsMap:
   

   

4. Used in SvgList. Vue:

<script>
import icons from '@/utils/svgConfig/generateIconsView'
export default {
  name: 'icons'.data () {
    return {
      iconsMap: []
    }
  },
  mounted () {
    const iconsMap = icons.state.iconsMap.map((i) => {
      return i.default.id.split(The '-')[1]
    })
    this.iconsMap = iconsMap
  }
}
</script>
Copy the code

5. Add click copy tips and methods (CNPM i-s clipboard), used in SvgList. Vue:

 methods: {
    generateIconCode (symbol) {
      return `<svg-icon icon-class="${symbol}" />`
    },
    handleClipboard (text, event) {
      clipboard(text, event)
    }
}
Copy the code

6. Add the SvgList. Vue route information to the route. The result is as follows: