Artikel yang menerangkan secara terperinci cara memperkenalkan ikon SVG dalam projek Vue3

Bagaimana untuk memperkenalkan ikon SVG ke dalam projek Vue3? Artikel berikut akan memperkenalkan kepada anda cara memperkenalkan ikon font ke dalam projek Vue3 saya harap ia akan membantu anda!

Pengenalan

Melalui kajian terdahulu Express dan Mysql

Di sini kami cuba membina sistem backend untuk menyatukan teknologi pembelajaran.

ikon SVG

Memandangkan ia adalah halaman, ia mesti tidak dapat dipisahkan daripada beberapa ikon ikon, jadi pastikan anda pergi ke yang paling lengkap Perpustakaan ikon Alibaba untuk mencari

Di sini kami menerangkan cara meletakkan kandungan Perpustakaan Ikon Alibaba ke halaman kami

Perpustakaan Ikon Alibaba

Masukkan halaman, cari Projek Saya di bawah Pengurusan Sumber dan cipta projek

tetapan Seperti berikut

Selepas mencipta projek, kami pergi ke perpustakaan bahan Ali untuk mencari beberapa ikon yang kami perlukan kemudian,

dan tambah Pergi ke Keranjang Beli-belah,

tambah ikon dalam Keranjang Belanja pada projek

Akan ada alamat pautan ikon dalam talian sebelum ini, izinkan kami memperkenalkannya.

Tetapi saya tidak menemuinya sekarang Anda harus memuat turunnya secara setempat dan menggunakannya = =

Kemudian kita hanya boleh memilih ikon dalam projek, pilih Simbol. dan Muat turun secara setempat

dan letakkan dalam direktori srcassetssvg

untuk membuka zip dan memadam yang tidak perlu perkara. Biarkan fail iconfont.js ke

dan kemudian importnya secara global dalam main.ts

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

Perkenalkan ikon svg

Dalam direktori src, buat direktori untuk menyimpan pemalam 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)
}

Kemudian daftarkan komponen dalam main.ts

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

dan gunakannya dalam halaman

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

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

Anda boleh lihat ikon SVG berjaya dipaparkan

Ringkasan

Lulus Express-Mysql-Vue3-TS-Pinia Buat projek sistem backend

Perkenalkan ikon SVG Alibaba ke dalam projek.

[Cadangan berkaitan: Tutorial pengenalan Vuejs]

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara memperkenalkan ikon SVG dalam projek Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!