An article explaining in detail how to introduce SVG icons in Vue3 projects

How to introduce SVG icons into Vue3 projects? The following article will introduce to you how to introduce iconfont icons into Vue3 projects. I hope it will be helpful to you!

Introduction

Through the previous period of learningExpress and Mysql

Here we try to build a backend system to consolidate the learning technology.

SVG icon

Since it is a page, it must be inseparable from some iconsicon, so be sure to go to the most complete Alibaba icon Library to find

Here we explain how to put the contents of Alibaba Icon Library on our page

Alibaba Icon Library

Enter the page, find Resource Management below My Project, and create the project

settings As follows

After creating the project, we enterAli’s material library to find some icons we need later,

and add them Go to Shopping Cart,

Add the icon in Shopping Cart to the project

##There will be an online icon link address before, let us introduce it.

But it is not found now. It should be downloaded locally and then used = =

Then we can only select the icon in the project, select

Symbol and Download it locally

Put it in the

src\assets\svg directory

Unzip it and delete unnecessary Just leave the

iconfont.js file

and then import it globally in

main.ts

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

Introduce svg-icon into the project

In the

src directory, create a directory for storing plug-insplugin

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

Then register the component in

main.ts

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

Use it in the page

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

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

You can see that the

SVG icon is successfully displayed

Summary

Through

Express-Mysql-Vue3-TS-Pinia Make a backend system project

Introduce Alibaba The

SVG icon into the project.

[Related recommendations:

vuejs introductory tutorial]

The above is the detailed content of An article explaining in detail how to introduce SVG icons in Vue3 projects. For more information, please follow other related articles on the PHP Chinese website!