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 learningExpressandMysql

Here we try to build abackend systemto 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 completeAlibaba icon Libraryto find

Here we explain how to put the contents ofAlibaba Icon Libraryon our page

Alibaba Icon Library

Enter the page, findResource ManagementbelowMy Project, and create the project

settings As follows

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

and add them Go toShopping Cart,

Add the icon inShopping Cartto 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

SymbolandDownload it locally

Put it in the

src\assets\svgdirectory

Unzip it and delete unnecessary Just leave the

iconfont.jsfile

and then import it globally in

main.ts

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

Introduce svg-icon into the project

In the

srcdirectory, create a directory for storing plug-insplugin

// index.vue   

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

You can see that the

SVGicon is successfully displayed

Summary

Through

Express-Mysql-Vue3-TS-PiniaMake abackend systemproject

Introduce Alibaba The

SVGicon 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!