Antes de comenzar a comprender cómo usar íconos en proyectos de Vue, debemos comprender algunos de los puntos de conocimiento más básicos de los íconos: la tecnología de sprites.
tecnología de sprites
Actualmente, la mejor práctica para los sprites SVG es usar elementos de símbolo. ¿Qué es el elemento símbolo? Simplemente traducido, significa "símbolo". Sin embargo, esta interpretación no encaja aquí en la escena. No sé si ha usado Flash, el símbolo es similar a "clip de película" o "componente" en Flash. Por lo tanto, personalmente creo que ese símbolo debe interpretarse como "componente" de la manera más apropiada. Entonces, ¿cuál es la relación entre el símbolo y SVG Sprite? Podemos considerar los elementos SVG como un escenario, y los símbolos son componentes ensamblados en el escenario uno por uno. Estos componentes uno por uno son los iconos SVG que usaremos uno por uno.
Por lo tanto, la estructura de código para un elemento SVG que combina tres iconos SVG sería la siguiente:
<svg>
<symbol>
<!-- 第1个图标路径形状之类代码 -->
</symbol>
<symbol>
<!-- 第2个图标路径形状之类代码 -->
</symbol>
<symbol>
<!-- 第3个图标路径形状之类代码 -->
</symbol>
</svg>
Cada símbolo es un elemento de icono, pero solo el código anterior no puede representar nada.
Debido a que un elemento de símbolo en sí mismo no se representa, solo la instancia del elemento de símbolo (una referencia al símbolo
el símbolo es como una prenda de vestir, nadie lo usa
El elemento use es un elemento muy poderoso e importante en SVG, especialmente en el desarrollo web:
- se puede llamar repetidamente;
- Llamar a través de SVG;
1. Se puede llamar repetidamente
Durante el desarrollo, finalmente usaste muchos valores de coordenadas para dibujar un gráfico. ¿Qué harías si hicieras el mismo gráfico nuevamente? ¿Copiar el código de nuevo? Todos los que aprenden programación saben una verdad, necesitamos encapsular cosas que se llaman repetidamente, pero en SVG no necesitamos encapsular, solo repetir directamente
<svg>
<symbol>
<g id="shape">
<rect x="0" y="0" width="50" height="50" />
<circle cx="0" cy="0" r="50" />
</g>javascript:;
</symbol>
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
</svg>
El mismo símbolo, pero la distancia del eje x es ligeramente diferente al llamar, podemos usar directamente
<svg width="500" height="110">
<use xlink:href="#shape" x="50" y="50" />
</svg>
Y esta llamada entre SVG es el núcleo de la "tecnología SVG Sprite".
Imagínese, solo necesitamos cargar un archivo SVG lleno de Sprite (símbolo) en algún lugar de la página (o incluir directamente el código SVG), por lo que, en cualquier esquina de la página, siempre que queramos usar este ícono, solo necesita un código simple, control CSS del tamaño del icono, solo hay un elemento de uso con solo el atributo xlink:href, ¡Listo! Es decir, a nivel de HTML, el costo del código de los iconos es casi el mismo que el del CSS Sprite tradicional o el popular font-face, el código es conciso y fácil de mantener. Todos los íconos SVG están en una fuente SVG. El tamaño se puede estirar arbitrariamente y el color se puede controlar. Es realmente la futura estrella de los íconos web.
Cómo usar la tecnología Sprite en el proyecto Vue
Apelación Entendemos el principio básico de la tecnología Sprite, nada más que importar iconfont.js (incluidos todos los símbolos generados, un código svg generado con js) y luego puede usarlo directamente. Pero hay un inconveniente, y es que no es lo suficientemente intuitivo, después de todo, nadie puede ver directamente cuál es el ícono que introdujeron desde el código, ni saben a qué nombre de ícono corresponde el ícono requerido, cada vez que lo usan. , deben consultar la documentación y, al agregar, eliminar o modificar íconos, se debe generar un nuevo js para reemplazar el iconfont.js original.
Entonces, en el proyecto Vue, podemos usar svg-sprite-loader, que es un cargador de paquete web. De hecho, cualquier proyecto compilado con paquete web puede usar este complemento. Puede empaquetar múltiples imágenes SVG en svg-sprite.
Primero, lo instalamos en nuestro proyecto Vue:
npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D
Luego cree una carpeta:
cree una carpeta en el directorio src, principalmente para almacenar los archivos de imagen svg que se utilizarán, como src/svg
Configure webpackConfig:
ahora que svg-sprite-loader está instalado, debe configurar webpack para usarlo
1. Para Vue CLI3.0 y superior, usamos principalmente vue.config.js para la configuración del paquete web:
module.exports = {
chainWebpack: config => {
// 清空默认svg规则
config.module
.rule('svg')
.uses.clear()
config.module //针对svg文件添加svg-sprite-loader规则
.rule('svg1')
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
o
module.exports = {
chainWebpack: config => {
// svg rule loader
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images')
imagesRule.exclude.add(resolve('src/assets/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
}
2. Para proyectos de Vue creados con andamios antiguos, como proyectos hiperconvergentes, los configuramos en src/build/webpack.base.conf.js:
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/svg')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/svg')], // 去除默认图片处理对指定 svg 的影响
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
}
importar automáticamente
Cuando colocamos los íconos que se usarán en la carpeta creada en la operación de apelación, también debemos usar require.context de webpack para importar estos archivos de íconos.
require.context(directorio,usarSubdirectorios,regExp)：
- directorio: Indica el directorio a recuperar
- useSubdirectories: ya sea para recuperar subdirectorios
- regExp: expresión regular para hacer coincidir archivos
require.context("./test", false, /.test.js$/); Esta línea de código irá a la
carpeta de prueba (sin incluir los subdirectorios) para buscar todos los archivos cuyos nombres de archivo terminen en .test.js Archivos que se puede exigir. Para decirlo más claramente,
podemos introducir los módulos de archivo correspondientes a través de coincidencias periódicas.
Agregue el siguiente código a main.js:
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
Luego, podemos agregar, eliminar y modificar directamente los íconos en la carpeta svg, sin importar qué, el símbolo svg se generará automáticamente.
En este punto podemos usar el icono directamente en el proyecto:
<svg><use xlink:href="#icon-name"/></svg>
Pero podemos encapsularlo en un componente Vue estándar:
<template>
<svg :class="className" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true,
},
className: { // 自定义 svg 类名，后期可根据类名修改 svg 样式
type: String,
default: '',
},
},
computed: {
iconName() {
return `#icon-${this.iconClass}`; // 拼接成设置好的 id 名格式
}
},
};
</script>
<style lang="less" scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
De esta manera, hemos terminado y podemos usar archivos SVG directamente en el proyecto Vue como queramos.