Github demo: Github address if useful to you, please give a star…

Chat background

This article uses vuE-CLI3 as an example to talk about how to use SVG more gracefully in your projects.

As we all know, VUE-CLI3 has been out for a long time, so you can feel the zero-configuration experience of VUE-CLI3. But, also brings some disadvantages, that is, if the default loader needs to be modified, it will be more troublesome.

Ok, to the point, I suggest that before reading this article, we should take a look at the future of Zhang Xinxu: SVG Sprite technology introduction, then we will mainly use the use of SVG mentioned above, first of all, on a picture of vuE-cli3 build project directory, you can see that only public/ and SRC/remain in the root directory, can be said to be very clean, you can create their own.

insrc/components/createSvgIconcomponent

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

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: ' ',
    },
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'} }, }, } </script> <style scoped> .svg-icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

insrc/So let’s create oneiconsDirectory, the directory structure is as follows:

The SVG directory is mainly used to store SVG files. Let’s look at the contents of index.js.

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// SVG component // register with global vue.component ('svg-icon', SvgIcon)

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

Of course, if you have your own ideas or requirements, you can introduce them separately, without having to register them globally.

inmain.jsThe introduction of

All right, here’s the most important step:

Modify the defaultloader:

You can go to vuE-CLI3 official website to view the specific tutorial, here I only say the need to modify the Loader and specific code implementation.

The first thing to note is that projects built with VUe-cli3 have a lot of options for initialization, and the directory I built is more in the form of *.config.js.

Create a file named vue.config.js in the root directory. The following operations are related to it.

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '/', dir)
}

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      const argv = process.argv
      const icourt = argv[argv.indexOf('--icourt-mode') + 1]

      args[0]['process.env'].MODE = `"${icourt}"`

      return args
    })
    // svg rule loader
    const svgRule = config.module.rule('svg'// Find svG-loader svgRule.uses.clear() // Clear the existing loader, If not, add svgRule. Exclude. add(/node_modules/) // regular match after this loader to exclude node_modules directory svgRule // add SVG new loader processing .test(/\.svg$/) .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'}) const imagesRule = config.module.rule(const imagesRule = config.module.rule)'images')
    imagesRule.exclude.add(resolve('src/icons'))
    config.module
      .rule('images') .test(/\.(png|jpe? g|gif|svg)(\? . *)? $/) }, configureWebpack: { devServer: { open:true,
      // https: true,
      proxy: {
        '/user': {
          target: 'https://devadminschool.icourt.cc',},'/live': {
          target: 'https://devadminschool.icourt.cc',},},},},}Copy the code

The default SVG rule loader is used by the SVG rule loader. The default SVG rule loader is used by the SVG rule loader. The default SVG rule loader is used by the SVG rule loader. You can find the default configuration of both loaders from vuE-CLI3 base Loader.

// Default SVG loader... webpackConfig.module .rule('svg') .test(/\.(svg)(\? . *)? $/) .use('file-loader')
      .loader('file-loader')
      .options({
        name: genAssetSubPath('img'}) // Default images loader... webpackConfig.module .rule('images') .test(/\.(png|jpe? g|gif|webp)(\? . *)? $/) .use('url-loader')
          .loader('url-loader')
          .options(genUrlLoaderOptions('img'))
Copy the code

Compared to my original code, I changed the file-loader used in the default SVG loader configuration to SVG-sprite-loader, eliminated node_modules, and added SVG to the default images-loader configuration. The SRC/ICONS directory has been excluded.

How to use it?

  • You can give the design greatly to SVG or fromiconfontDownload the open source ICON in SVG format from the official website and copy it tosrc/icons/svgDirectory;
  • Click on thesvgView the source code, modifyfillProperties,fill="currentColor"Or,fill=""If you do not have this property, you do not need to use it. This allows external control of the color of the icon, or the color of the parent element.
  • Note that SVG is named the same as SvgIcon, and take a look at the final use:

    It’s going to be used heresrc/icons/svg/go-back.svgFile.

Conclusion:

This project can also be used as the initial architecture of the project, with vuE-Router and VUex built in.

This article uses vuE-CLI3 as an example. You can manually modify the corresponding Loader for previous projects.

Github address if useful to you, please give a star…

This article is in the nuggets of the first post, the newcomers entered, but also ask each elder care…