Rumah >hujung hadapan web >View.js >Artikel yang menerangkan secara terperinci cara memperkenalkan ikon SVG dalam projek Vue3

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

青灯夜游
青灯夜游ke hadapan
2022-08-31 14:18:163991semak imbas

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!

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

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

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

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

tetapan Seperti berikut

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

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

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

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

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

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

dan letakkan dalam direktori srcassetssvg

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

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

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

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

// 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>

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

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!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam