Use imágenes SVG a través de vite-plugin-svg-icons

1. Instale  vite -plugin-svg-icons

   
   
    
    
npm i vite-plugin-svg-iconos -D
// o
hilo añadir vite-plugin-svg-iconos -D
   
   
    
    

2. Introducir en main.js

import 'virtual:svg-icons-register'
   
   
    
    

3. Configurar la carpeta de imágenes SVG

como:

4. Configurar en vite.config.js

   
   
    
    
//importar ruta, {resolver} desde 'ruta'
importar ruta desde 'ruta'
importar {createSvgIconsPlugin} desde 'vite-plugin-svg-icons'

exportar defineConfig por defecto ( ( comando ) => {
volver {
complementos : [
crearSvgIconsPlugin ({
// Especificar la carpeta para cachear
iconDirs : [ruta. resolver (proceso. cwd (), 'src/activos/iconos' )],
// especifica el formato del ID del símbolo
símboloId : '[nombre]'
})
],
}

})
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

5. Cree un nuevo componente de paquete svg, referencia de ruta: src\components\ svg-icon \index.vue

   
   
    
    
<plantilla>
< svg :class = "svgClass" aria-hidden = "true" >
< use class = "svg-use" :href = "symbolId" />
</svg> _ _
</plantilla>

< guión >
importar {defineComponent, calculado} desde 'vue'

exportar defineComponent predeterminado ({
nombre : 'SvgIcon' ,
accesorios : {
prefijo : {
tipo : Cadena ,
predeterminado : 'icono'
},
nombre : {
tipo : Cadena ,
requerido : verdadero
},
nombre de clase : {
tipo : Cadena ,
predeterminado : ''
}
},
configuración ( accesorios ) {
const symbolId = calculado ( () => `# ${props.name} ` )
const svgClass = calculado ( () => {
if (accesorios. className ) {
devuelve `svg-icon ${props.className} `
}
devolver 'svg-icono'
})
volver {Id del símbolo, svgClass}
}
})
</ guión >
< ámbito de estilo >
.svg-icono {
vertical-align : - 0.1em ; /* Debido a que el tamaño del icono está configurado para ser el mismo que el tamaño de la fuente, y el borde inferior del tramo y otras etiquetas se alinearán con la línea de base de la fuente, es necesario establecer un desplazamiento hacia abajo relación para corregir el efecto visual no alineado */
fill: currentColor; /* Define el color del elemento, currentColor es una variable, el valor de esta variable representa el valor del color del elemento actual, si el elemento actual no establece el valor del color, heredará del elemento principal */
desbordamiento : oculto;
}
</ estilo >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

6. Importación y uso bajo demanda

   
   
    
    
< plantilla >

< SvgIcon nombre = "problema" > </ SvgIcon >

</ plantilla >

< configuración del guión >
importar SvgIcon desde "@/components/SvgIcon.vue" ;
</ guión >
   
   
    
    

7. Introducción y uso global

Añadir en main.js

   
   
    
    
importar svgIcon desde './components/svgIcon/index.vue'

createApp ( Aplicación ). componente ( 'svg-icon' , svgIcon)
   
   
    
    

1. Instale  vite -plugin-svg-icons

   
   
  
  
npm i vite-plugin-svg-iconos -D
// o
hilo añadir vite-plugin-svg-iconos -D
   
   
  
  

2. Introducir en main.js

import 'virtual:svg-icons-register'
   
   
  
  

3. Configurar la carpeta de imágenes SVG

como:

4. Configurar en vite.config.js

   
   
  
  
//importar ruta, {resolver} desde 'ruta'
importar ruta desde 'ruta'
importar {createSvgIconsPlugin} desde 'vite-plugin-svg-icons'

exportar defineConfig por defecto ( ( comando ) => {
volver {
complementos : [
crearSvgIconsPlugin ({
// Especificar la carpeta para cachear
iconDirs : [ruta. resolver (proceso. cwd (), 'src/activos/iconos' )],
// especifica el formato del ID del símbolo
símboloId : '[nombre]'
})
],
}

})
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

5. Cree un nuevo componente de paquete svg, referencia de ruta: src\components\ svg-icon \index.vue

   
   
  
  
<plantilla>
< svg :class = "svgClass" aria-hidden = "true" >
< use class = "svg-use" :href = "symbolId" />
</svg> _ _
</plantilla>

< guión >
importar {defineComponent, calculado} desde 'vue'

exportar defineComponent predeterminado ({
nombre : 'SvgIcon' ,
accesorios : {
prefijo : {
tipo : Cadena ,
predeterminado : 'icono'
},
nombre : {
tipo : Cadena ,
requerido : verdadero
},
nombre de clase : {
tipo : Cadena ,
predeterminado : ''
}
},
configuración ( accesorios ) {
const symbolId = calculado ( () => `# ${props.name} ` )
const svgClass = calculado ( () => {
if (accesorios. className ) {
devuelve `svg-icon ${props.className} `
}
devolver 'svg-icono'
})
volver {Id del símbolo, svgClass}
}
})
</ guión >
< ámbito de estilo >
.svg-icono {
vertical-align : - 0.1em ; /* Debido a que el tamaño del icono está configurado para ser el mismo que el tamaño de la fuente, y el borde inferior del tramo y otras etiquetas se alinearán con la línea de base de la fuente, es necesario establecer un desplazamiento hacia abajo relación para corregir el efecto visual no alineado */
fill: currentColor; /* Define el color del elemento, currentColor es una variable, el valor de esta variable representa el valor del color del elemento actual, si el elemento actual no establece el valor del color, heredará del elemento principal */
desbordamiento : oculto;
}
</ estilo >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

6. Importación y uso bajo demanda

   
   
  
  
< plantilla >

< SvgIcon nombre = "problema" > </ SvgIcon >

</ plantilla >

< configuración del guión >
importar SvgIcon desde "@/components/SvgIcon.vue" ;
</ guión >
   
   
  
  

7. Introducción y uso global

Añadir en main.js

   
   
  
  
importar svgIcon desde './components/svgIcon/index.vue'

createApp ( Aplicación ). componente ( 'svg-icon' , svgIcon)