1. Install vite -plugin-svg-icons
-
npm i vite-plugin-svg-icons -D
-
// or
-
yarn add vite-plugin-svg-icons -D
2. Introduce in main.js
import 'virtual:svg-icons-register'
3. Configure the SVG image folder
like:
4. Configure in vite.config.js
-
//import path,{ resolve } from 'path'
-
import path
from
'path'
-
import {createSvgIconsPlugin}
from
'vite-plugin-svg-icons'
-
-
export
default
defineConfig(
(command) => {
-
return {
-
plugins: [
-
createSvgIconsPlugin({
-
// Specify the folder to cache
-
iconDirs: [path.
resolve(process.
cwd(),
'src/assets/icons')],
-
// specify symbolId format
-
symbolId:
'[name]'
-
})
-
],
-
}
-
-
})
5. Create a new svg package component, path reference: src\components\ svg-icon \index.vue
-
<template>
-
<svg :class="svgClass" aria-hidden="true">
-
<use class="svg-use" :href="symbolId" />
-
</svg>
-
</template>
-
-
<script>
-
import { defineComponent, computed }
from
'vue'
-
-
export
default
defineComponent({
-
name:
'SvgIcon',
-
props: {
-
prefix: {
-
type:
String,
-
default:
'icon'
-
},
-
name: {
-
type
: String,
-
required:
true
-
},
-
className: {
-
type
: String,
-
default:
''
-
}
-
},
-
setup(
props) {
-
const symbolId =
computed(
() =>
`#${props.name}`)
-
const svgClass =
computed(
() => {
-
if (props.
className) {
-
return
`svg-icon ${props.className}`
-
}
-
return
'svg-icon'
-
})
-
return { symbolId, svgClass }
-
}
-
})
-
</script>
-
<style scope>
-
.svg-icon {
-
vertical-align
: - 0.1em ; /* Because the icon size is set to be the same as the font size, and the bottom edge of span and other labels will be aligned with the font baseline, it is necessary to set a downward offset ratio to correct the visual unaligned effect */
-
fill: currentColor; /* Define the color of the element, currentColor is a variable, the value of this variable represents the color value of the current element, if the current element does not set the color value, it will inherit from the parent element*/
-
overflow: hidden;
-
}
-
</style>
6. Import and use on demand
-
<template>
-
-
<SvgIcon name="issue">
</SvgIcon>
-
-
</template>
-
-
<script setup>
-
import
SvgIcon
from
"@/components/SvgIcon.vue";
-
</script>
7. Global introduction and use
Add in main.js
-
import svgIcon
from
'./components/svgIcon/index.vue'
-
-
createApp(
App).
component(
'svg-icon', svgIcon)
1. Install vite -plugin-svg-icons
-
npm i vite-plugin-svg-icons -D
-
// or
-
yarn add vite-plugin-svg-icons -D
2. Introduce in main.js
import 'virtual:svg-icons-register'
3. Configure the SVG image folder
like:
4. Configure in vite.config.js
-
//import path,{ resolve } from 'path'
-
import path
from
'path'
-
import {createSvgIconsPlugin}
from
'vite-plugin-svg-icons'
-
-
export
default
defineConfig(
(command) => {
-
return {
-
plugins: [
-
createSvgIconsPlugin({
-
// Specify the folder to cache
-
iconDirs: [path.
resolve(process.
cwd(),
'src/assets/icons')],
-
// specify symbolId format
-
symbolId:
'[name]'
-
})
-
],
-
}
-
-
})
5. Create a new svg package component, path reference: src\components\ svg-icon \index.vue
-
<template>
-
<svg :class="svgClass" aria-hidden="true">
-
<use class="svg-use" :href="symbolId" />
-
</svg>
-
</template>
-
-
<script>
-
import { defineComponent, computed }
from
'vue'
-
-
export
default
defineComponent({
-
name:
'SvgIcon',
-
props: {
-
prefix: {
-
type:
String,
-
default:
'icon'
-
},
-
name: {
-
type
: String,
-
required:
true
-
},
-
className: {
-
type
: String,
-
default:
''
-
}
-
},
-
setup(
props) {
-
const symbolId =
computed(
() =>
`#${props.name}`)
-
const svgClass =
computed(
() => {
-
if (props.
className) {
-
return
`svg-icon ${props.className}`
-
}
-
return
'svg-icon'
-
})
-
return { symbolId, svgClass }
-
}
-
})
-
</script>
-
<style scope>
-
.svg-icon {
-
vertical-align
: - 0.1em ; /* Because the icon size is set to be the same as the font size, and the bottom edge of span and other labels will be aligned with the font baseline, it is necessary to set a downward offset ratio to correct the visual unaligned effect */
-
fill: currentColor; /* Define the color of the element, currentColor is a variable, the value of this variable represents the color value of the current element, if the current element does not set the color value, it will inherit from the parent element*/
-
overflow: hidden;
-
}
-
</style>
6. Import and use on demand
-
<template>
-
-
<SvgIcon name="issue">
</SvgIcon>
-
-
</template>
-
-
<script setup>
-
import
SvgIcon
from
"@/components/SvgIcon.vue";
-
</script>
7. Global introduction and use
Add in main.js
-
import svgIcon
from
'./components/svgIcon/index.vue'
-
-
createApp(
App).
component(
'svg-icon', svgIcon)