Prática recomendada para carregar iconfont usando svg no projeto Vue3 + Vite
1 Por que você precisa usar iconfont?
Geralmente, os projetos Vue3 usarão a biblioteca de UI do componente Element Plus , portanto, na maioria dos casos, você pode usar seus próprios ícones diretamente el-icon. Porém, às vezes o ícone que queremos usar el-iconnão existe no , então temos que procurar outros recursos da biblioteca de ícones (ps: vocês podem criar seus próprios ícones de desenho, doge~). Normalmente usamos iconfont - é uma plataforma de comunicação e gerenciamento de ícones vetoriais fornecida pelo Alibaba, que oferece uma riqueza de ícones, ilustrações e recursos de fontes.
2 Como usar iconfont no projeto Vue3 + Vite?
2.1 Encapsulando o componente SvgIcon.vue
Crie um novo arquivo SvgIcon.vue na src/componentpasta e adicione o seguinte código:
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconClassName" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import {
computed } from 'vue'
const props = defineProps({
iconName: {
type: String,
required: true
},
className: {
type: String,
default: ''
},
color: {
type: String,
default: '#409eff'
},
size: {
type: String,
default: '1em'
}
})
// 图标在 iconfont 中的名字
const iconClassName = computed(()=>{
return `#${
props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${
props.className}`
}
return 'svg-icon'
});
</script>
<style scoped>
.svg-icon {
/* v-bind 是 Vue3 才支持的功能，可以将 CSS 的值与 js 的值绑定 */
width: v-bind('props.size');
height: v-bind('props.size');
position: relative;
fill: currentColor;
vertical-align: -2px;
}
</style>
Após o componente ser encapsulado, ele precisa ser main.jsregistrado globalmente em , caso contrário o componente terá que ser introduzido separadamente toda vez que o ícone for utilizado.
import {
createApp } from 'vue'
import App from './App.vue'
import SvgIcon from './components/common/SvgIcon.vue'
const app = createApp(App)
app.component('SvgIcon', SvgIcon)
app.mount('#app')
2.2 Introdução da fonte de ícone
Entre no site oficial do iconfont , digite o nome do ícone e pressione Enter, conforme mostrado na figura abaixo:
Passe o mouse sobre o ícone de sua preferência e clique em Adicionar ícone à biblioteca, conforme mostrado na figura abaixo:
Em seguida, clique no ícone ícone do carrinho de compras na barra de navegação e clique no botão Adicionar ao projeto na barra lateral, conforme mostrado na imagem abaixo: Em seguida,
ele irá automaticamente para a página do projeto pessoal e clique como mostrado abaixo:
Selecione todo o código js na página da web e copie-o (pressione Ctrl + no teclado A (botão direito do mouse após A):
Volte para a pasta do projeto e crie uma nova pasta iconfont src/assetsem , em seguida, crie um novo arquivo iconfont.js abaixo dela e, finalmente, cole o código js que você acabou de copiar no arquivo.
Em seguida, main.jsimporte este arquivo no formato .
import './assets/iconfont/iconfont.js'
2.3 Exemplos de uso específicos
Basta usá-lo diretamente .vuena tag template de uma página específica (arquivo).
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<svg-icon iconName="icon-like"></svg-icon>
<svg-icon iconName="icon-star" color="green"></svg-icon>
</template>
2.4 Como alterar o efeito de foco do ícone?
O ícone SVG é diferente do estilo da classe. Ele não pode modificar diretamente o estilo de foco para definir a mudança de cor quando o mouse passa sobre o ícone. Neste momento, precisamos mudar nosso pensamento. Passamos SvgIcon.vueo atributo color e aplicamos cor ao ícone SVG por meio de preenchimento, para que possamos alterar o efeito de foco ouvindo o evento de foco do mouse e modificando o valor da cor no componente pai.
<template>
<div class="icon-wrapper" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<SvgIcon iconName="icon-star" :color="iconColor"></SvgIcon>
</div>
</template>
<script setup>
const iconColor = ref('grey')
const handleMouseenter = () => {
iconColor.value = 'blue'
}
const handleMouseleave = () => {
iconColor.value = 'grey'
}
</script>