Two ways to introduce svg icons in Vue

How to introduce svg icons in Vue

Method 1 of introducing svg icon in Vue

Install

yarn add svg-sprite-loader --dev

svg component

index.vue

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

<script>
export default {
 name: 'SvgIcon',
 props: {
  // svg name svgName: {
   type: String,
   required: true
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.svgName}`
  },
  svgClass() {
   if (this.svgName) {
    return 'svg-icon' + this.svgName
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>

<style lang="less" scoped>
.svg-icon {
 width: 100px;
 height: 100px;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

// Register to the global Vue.component('svg-icon', SvgIcon)

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

vue.config.js

module.exports = {
	chainWebpack: config => {
	 	config.module
   .rule('svg')
   .exclude.add(resolve('src/assets/icons'))
   .end()
  config.module
   .rule('icons')
   .test(/\.svg$/)
   .include.add(resolve('src/assets/icons'))
   .end()
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
   .end()
	}  
}

Used in the page

<!-- svg-name is the svg name-->
<svg-icon svg-name="ic_home_news" />

Method 2 of introducing svg icon in Vue

npm install svg-sprite-loader --save-dev

Add the following code to vue.config.js

const path = require('path');
function resolve(dir) {
 // __dirname absolute path of the project root directory return path.join(__dirname, dir);
}
module.exports = {
 chainWebpack: config => {
 const svgRule = config.module.rule('svg');
 // Clear all existing loaders
 // If you don't do this, subsequent loaders will be appended after the existing loaders for this rule svgRule.uses.clear();
 svgRule
  .test(/\.svg$/)
  .include.add(path.resolve(__dirname, './src/icons/svg'))
  .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/svg'))
  .end()
  .use('file-loader')
  .loader('file-loader');
 },
}

Create the following file directory

SvgIcon.vue code

<template>
 <svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
 <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" />
 </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>

svg folder to place svg icon

index.js code

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);

Finally, introduce it in main.js

import './icons';

Using SVG in the page

icon-class is the svg icon name class-name is the class name you want to customize

<svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>

Summarize

This concludes this article about two ways to introduce svg icons in Vue. For more relevant content about introducing svg icons in Vue, please search for 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: