Un article expliquant en détail comment introduire les icônes SVG dans les projets Vue3

Comment introduire les icônes SVG dans les projets Vue3 ? L'article suivant vous expliquera comment introduire les icônes iconfont dans les projets Vue3. J'espère qu'il vous sera utile !

Introduction

Grâce à l'apprentissage Express et Mysql il y a quelque temps

ici, j'essaie de construire un système backend pour consolider la technologie d'apprentissage.

Icône SVG

Puisqu'il s'agit d'une page, elle doit être indissociable de certaines icônesicône, vous devez donc vous rendre dans la Bibliothèque d'icônes Alibaba la plus complète pour la trouver

Ici, nous expliquons comment utiliser l' Bibliothèque d'icônes Ali Mettez des choses sur notre page

Bibliothèque d'icônes Alibaba

Entrez dans la page, recherchez Mon projet ci-dessous Gestion des ressources et créez le projet

Définissez comme suit

Créer Après le projet, nous sommes entrés dans la bibliothèque de matériaux d'Alibaba pour trouver quelques icônes dont nous aurons besoin plus tard,

et les avons ajoutées au panier,

avons ajouté les icônes dans le panier au projet

Il y aura une adresse de lien d'icône en ligne avant, laissez-nous la présenter.

Mais je ne le trouve pas maintenant. Il doit être téléchargé localement puis utilisé = =

Ensuite, nous ne pouvons sélectionner que l'icône dans le projet Symbole et télécharger localement

et la mettre Décompressez

dans le répertoire srcassetssvg

, supprimez les éléments inutiles, ne laissant que le fichier iconfont.js

puis importez svg globalement dans main.ts

import './assets/svg/iconfont.js'

-icon

Dans le src, créez un répertoire pour stocker les plug-ins plugin

// index.vue

<template>
  <svg>
    <use></use>
  </svg>
</template>

<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  iconName: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: &#39;&#39;
  },
  color: {
    type: String,
    default: &#39;#409eff&#39;
  }
})
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
  return `#${props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return &#39;svg-icon&#39;
})
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

// index.ts

import { App } from 'vue'

import SvgIcon from './index.vue'

export function setupSvgIcon(app: App) {
  app.component('SvgIcon', SvgIcon)
}

Enregistrez ensuite le composant

import { setupSvgIcon } from './plugin/SvgIcon/index'
setupSvgIcon(app)

dans

main.ts

et utilisez-le sur la page

<template>
  <div> 工作台页面 </div>

  <svg-icon></svg-icon>
</template>

Vous peut voir l'icône SVG s'affiche avec succès

Résumé

via Express-Mysql-Vue3-TS-Pinia Système Projet

Présentez Alibaba Icône

SVG dans le projet.

【Recommandation associée :

Tutoriel d'introduction à vuejs】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!