Antes de começar a entender como usar ícones em projetos Vue, precisamos entender alguns dos pontos de conhecimento mais básicos sobre ícones - tecnologia sprite.
Tecnologia Sprite
Atualmente, a melhor prática para sprites SVG é usar elementos de símbolo. Qual é o elemento símbolo? Traduzido simplesmente, significa "símbolo". No entanto, essa interpretação não se encaixa na cena aqui. Não sei se você usou o Flash, o símbolo é realmente semelhante a "clipe de filme" ou "componente" no Flash. Portanto, eu pessoalmente acho que esse símbolo deve ser interpretado como "componente" da maneira mais apropriada! Então, qual é a relação entre o símbolo e o Sprite SVG? Podemos considerar os elementos SVG como um palco, e os símbolos são componentes montados no palco um a um. Esses componentes um a um são os ícones SVG que usaremos um a um.
Assim, a estrutura de código para um elemento SVG que combina três ícones SVG seria a seguinte:
<svg>
<symbol>
<!-- 第1个图标路径形状之类代码 -->
</symbol>
<symbol>
<!-- 第2个图标路径形状之类代码 -->
</symbol>
<symbol>
<!-- 第3个图标路径形状之类代码 -->
</symbol>
</svg>
Cada símbolo é um elemento de ícone, mas apenas o código acima não pode renderizar nada.
Como um elemento de símbolo em si não é renderizado, apenas a instância do elemento de símbolo (uma referência ao símbolo
símbolo é como uma peça de roupa, ninguém usa
O elemento use é um elemento muito poderoso e importante em SVG, especialmente no desenvolvimento web:
- pode ser chamado repetidamente;
- Chamada em SVG;
1. Pode ser chamado repetidamente
Durante o desenvolvimento, você finalmente usou muitos valores de coordenadas para desenhar um gráfico. O que você faria se fizesse o mesmo gráfico novamente? Copiar o código novamente? Todo mundo que aprende programação sabe uma verdade, precisamos encapsular coisas que são chamadas repetidamente, mas em SVG não precisamos encapsular, apenas repetir diretamente
<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>
O mesmo símbolo, mas a distância do eixo x é ligeiramente diferente ao chamar, podemos usar diretamente
<svg width="500" height="110">
<use xlink:href="#shape" x="50" y="50" />
</svg>
E essa chamada cross-SVG é o núcleo da "tecnologia SVG Sprite".
Imagine, só precisamos carregar um arquivo SVG cheio de Sprite(símbolo) em algum lugar da página (ou incluir diretamente o código SVG), então, em qualquer canto da página, desde que queiramos usar este ícone, basta precisa de um código simples, controle CSS do tamanho do ícone, há apenas um elemento de uso com apenas o atributo xlink:href, Pronto! Ou seja, no nível do HTML, o custo do código dos ícones é quase o mesmo do Sprite CSS tradicional ou do popular font-face.O código é conciso e fácil de manter. Todos os ícones SVG estão em uma fonte SVG. O tamanho pode ser esticado arbitrariamente e a cor pode ser controlada.É realmente a futura estrela dos ícones da Web.
Como usar a tecnologia Sprite no projeto Vue
Recurso Entendemos o princípio básico da tecnologia Sprite, nada mais que importar o iconfont.js (incluindo todos os símbolos gerados, um código svg gerado com js) e então você pode usar diretamente. Mas há uma falha, que é que não é intuitivo o suficiente. Afinal, ninguém pode ver diretamente qual é o ícone que introduziu no código, nem sabe a qual nome de ícone corresponde o ícone necessário. Toda vez que o usar , eles devem verificar a documentação. E ao adicionar, excluir ou modificar ícones, um novo js deve ser gerado para substituir o iconfont.js original.
Portanto, no projeto Vue, podemos usar o svg-sprite-loader, que é um carregador de webpack. Na verdade, qualquer projeto compilado com webpack pode usar este plug-in. Ele pode empacotar várias imagens SVG em svg-sprite.
Primeiro, instalamos em nosso projeto Vue:
npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D
Em seguida, crie uma pasta:
Crie uma pasta no diretório src, principalmente para armazenar os arquivos de imagem svg a serem usados, como src/svg
Configurar webpackConfig:
Agora que o svg-sprite-loader está instalado, você precisa configurar o webpack para usá-lo
1. Para Vue CLI3.0 e superior, usamos principalmente vue.config.js para configuração do webpack:
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()
}
}
ou
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 projetos Vue construídos com andaimes antigos, como projetos hiperconvergentes, nós os configuramos em 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 automaticamente
Quando colocamos os ícones a serem usados na pasta criada na operação de apelação, também precisamos usar o require.context do webpack para importar esses arquivos de ícones.
require.context(directory,useSubdirectories,regExp):
- diretório: Indica o diretório a ser recuperado
- useSubdirectories: Se deve recuperar subdiretórios
- regExp: expressão regular para combinar arquivos
require.context("./test", false, /.test.js$/); Esta linha de código irá para a
pasta de teste (não incluindo subdiretórios) para encontrar todos os arquivos cujos nomes terminam com .test.js Arquivos que pode ser exigido. Para ser mais direto,
podemos introduzir os módulos de arquivo correspondentes por meio de correspondência regular.
Adicione o seguinte código ao main.js:
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
Depois, podemos adicionar, excluir e modificar diretamente os ícones na pasta svg. Não importa o que aconteça, o símbolo svg será gerado automaticamente.
Neste ponto podemos usar o ícone diretamente no projeto:
<svg><use xlink:href="#icon-name"/></svg>
Mas podemos encapsulá-lo em um componente Vue padrão:
<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>
Desta forma, terminamos e podemos usar arquivos SVG diretamente no projeto Vue como quisermos.