Detailed graphic explanation of how to use svg in vue3+vite project

Today, in the practice of vue3+vite project, when using svg, I found that the previous writing method could not be used. The previous usage method refers to the elegant use of svg in vue2

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

Then I searched for various materials and finally realized it. Without further ado, here is the code:

stept1: File directory

stept2: Install svg-sprite-loader

npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D

Step 3: Create svgIcon.vue file

   <template>
  <svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
    <use :xlink:href="iconName" rel="external nofollow" />
  </svg>
</template>

<script setup>


import { defineProps, computed } from "vue";

const props = defineProps({
  name: {
      type: String,
      required: true
    },
    color:
      type: String,
      default: ''
    }
})

const iconName = computed(()=>`#icon-${props.name}`);
const svgClass = computed(()=> {
  console.log(props.name, 'props.name');
  if (props.name) {
        return `svg-icon icon-${props.name}`
      }
      return 'svg-icon'
});
</script>

<style lang='scss'>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

stept4: Create an icons folder to store svg files

stept5: Inject svg-icon component globally in main.js

import { createApp } from 'vue'
import App from './App.vue'

import svgIcon from './components/svgIcon.vue'

createApp(App).component('svg-icon', svgIcon).mount('#app');

stept6: Create svgBuilder.js in the plugins folder (here comes the key point), ts version reference: https://github.com/JetBrains/svg-sprite-loader/issues/434

import { readFileSync, readdirSync } from 'fs'

let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g

const hasViewBox = /(viewBox="[^>+].*?")/g

const clearReturn = /(\r)|(\n)/g

function findSvgFile(dir) {
  const svgRes = []
  const dirents = readdirSync(dir, {
    withFileTypes: true
  })
  for (const dirent of dirents) {
    if (dirent.isDirectory()) {
      svgRes.push(...findSvgFile(dir + dirent.name + '/'))
    } else {
      const svg = readFileSync(dir + dirent.name)
        .toString()
        .replace(clearReturn, '')
        .replace(svgTitle, ($1, $2) => {
          // console.log(++i)
          // console.log(dirent.name)
          let width = 0
          let height = 0
          let content = $2.replace(
            clearHeightWidth,
            (s1, s2, s3) => {
              if (s2 === 'width') {
                width = s3
              } else if (s2 === 'height') {
                height = s3
              }
              return ''
            }
          )
          if (!hasViewBox.test($2)) {
            content += `viewBox="0 0 ${width} ${height}"`
          }
          return `<symbol id="${idPerfix}-${dirent.name.replace(
            '.svg',
            ''
          )}" ${content}>`
        })
        .replace('</svg>', '</symbol>')
      svgRes.push(svg)
    }
  }
  return svgRes
}

export const svgBuilder = (path, perfix = 'icon') => {
  if (path === '') return
  idPerfix = perfix
  const res = findSvgFile(path)
  // console.log(res.length)
  // const res = []
  return {
    name: 'svg-transform',
    transformIndexHtml(html) {
      return html.replace(
        '<body>',
        `
          <body>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
              ${res.join('')}
            </svg>
        `
      )
    }
  }
}

stept7: Finally, modify the configuration in vite.config.js

import { svgBuilder } from './src/plugins/svgBuilder'; 

export default defineConfig({
  plugins: [svgBuilder('./src/icons/svg/')] // All svg files under src/icons/svg/ have been imported here, no need to import them separately})

Summarize

This is the end of this article on how to use SVG in Vue3+Vite projects. For more relevant content about using SVG in Vue3+Vite, 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:

Detailed explanation of vite2.0+vue3 mobile project

<<: CSS pixels and solutions to different mobile screen adaptation issues

>>: How to use shell to perform batch operations on multiple servers

Detailed graphic explanation of how to use svg in vue3+vite project

Simple CSS text animation effect

The problem of Vue+tsx using slot is not replaced

Vue realizes the palace grid rotation lottery

Detailed explanation of how to configure multi-threaded master-slave replication from MySQL 5.7 slave nodes

Three ways to share component logic in React

MySQL database transaction example tutorial

Installation and configuration tutorial of MongoDB under Linux

How to turn off eslint detection in vue (multiple methods)

The best 9 foreign free picture material websites

Recommend several MySQL related tools

Recommend

Provides helpful suggestions for improving website design

Docker link realizes container interconnection

Summary of Common Mistakes in Web Design

Implementation of Docker container connection and communication

CSS removes the background color of elements generated when they are clicked on the mobile terminal (recommended)

MYSQL8.0.13 free installation version configuration tutorial example detailed explanation

How to use vw+rem for mobile layout

Docker configuration Alibaba Cloud Container Service operation

Negative margin-top value solves the problem of vertical center alignment between label text and input

How to generate a unique server-id in MySQL

Detailed explanation of the execution order of JavaScript Alert function

Summary of 4 solutions for returning values on WeChat Mini Program pages

Detailed explanation on how to modify the default port of nginx

dl, dt, dd list label examples

Detailed explanation of JavaScript closure issues