Steps for packaging and configuring SVG components in Vue projects

I just joined a new company recently. After getting the project, I found an interesting thing that the title icon is made with svg. This article thoroughly explains how to use it.

1. Create a vue project (use cli to build scaffolding, this test project is configured with vue cli4)

2. Create a custom component

insert image description here

The specific code is as follows:

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" rel="external nofollow" />
  </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.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

3. Create icons in the root directory, create a new index.js (which will be globally imported later), and create a new svg directory to store svg images (as for how to download svg, you can download it from Alibaba's iconfont, just search Baidu)

insert image description here

The specific code of index.js is as follows:

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon' // svg component // register globally
Vue.component('svg-icon', SvgIcon)

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

4. Globally import main.js for introduction

insert image description here

5. At this time, the project also needs to configure vue.config.js (otherwise it will not be displayed)

const path = require('path')
module.exports = {
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .test(/\.svg$/)
            .include.add(path.resolve(__dirname, './src/icons')).end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
        const fileRule = config.module.rule('file')
        fileRule.uses.clear()
        fileRule
            .test(/\.svg$/)
            .exclude.add(path.resolve(__dirname, './src/icons'))
            .end()
            .use('file-loader')
            .loader('file-loader')
    }
}

That's it;

6. Use components in the project

Here I use functional components to introduce, which can also be introduced through normal component usage methods

<script>
export default {
  functional: true,
  props: {
    level:
      type: Number,
      required: true,
    },
  },
  render: function (h, context) {
    console.log(context);
    let vnodes = [];
    let { level } = context.props;
    // vnodes.push(<i class="el-icon-edit" style="width:19px"></i>);
    vnodes.push(<svg-icon icon-class="date"></svg-icon>);
    vnodes.push(<span class="span">{level}</span>);
    return vnodes;
  },
};
</script>
<style scoped>
.span {
  font-size: 50px;
}
</style>

Note: The value of icon-class is directly the file name of svg.

This concludes this article about the steps for encapsulating and configuring SVG components in Vue projects. For more information about encapsulating and configuring Vue SVG components, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: