search
HomeWeb Front-endVue.jsHow to use svg method in vue3+vite2

1. Install vite-plugin-svg-icons

You also need to install fast-glob related dependencies here, otherwise vite will report a Cannot find module 'fast-glob’ error when running npm run dev

npm i fast-glob@3.x -D
npm i vite-plugin-svg-icons@2.x -D

2. Create a new component index.vue under src/components/svgIcon

<template>
  <svg aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId" rel="external nofollow"  :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from &#39;vue&#39;;

const props = defineProps({
  prefix: {type: String,default: &#39;icon&#39;,},
  iconClass: {type: String,required: true,},
  color: {type: String,default: &#39;&#39;}
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: hidden;
  fill: currentColor;
}
</style>

3. Add settings in tsconfig.json

types to specify the modules that need to be included , only the declaration files of the modules listed here will be loaded. It is not necessary to add it. When I tested the two demos, one required it and the other did not. If you have any problems, you can try adding

{
  "compilerOptions": {
    "types": ["vite-plugin-svg-icons/client"]
  }
}

4. Configuration plug-in in vite.config.ts

import { resolve } from &#39;path&#39;
import { createSvgIconsPlugin } from &#39;vite-plugin-svg-icons&#39;

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), &#39;src/assets/imgs/svg&#39;)],
      // 指定symbolId格式
      symbolId: &#39;icon-[dir]-[name]&#39;,
    })
  ]
})

5. Register the component globally in main.ts

import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;@/router&#39;
import { store, key } from &#39;@/store&#39;

const app = createApp(App)

import &#39;virtual:svg-icons-register&#39; // 引入注册脚本
import SvgIcon from &#39;@/components/svgIcon/index.vue&#39; // 引入组件
app.component(&#39;svg-icon&#39;, SvgIcon)

app.use(router).use(store, key).mount(&#39;#app&#39;)

6. Use

<template>
  <svg-icon icon-class="category"></svg-icon>
  <svg-icon icon-class="accountant" ></svg-icon>
</template>

in the page 7. File directory structure and its effect display

How to use svg method in vue3+vite2

The above is the detailed content of How to use svg method in vue3+vite2. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:亿速云. If there is any infringement, please contact admin@php.cn delete
vue是前端css框架吗vue是前端css框架吗Aug 26, 2022 pm 07:37 PM

vue不是前端css框架,而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架,是基于MVVM设计模式的前端框架,且专注于View层。Vue.js的优点:1、体积小;2、基于虚拟DOM,有更高的运行效率;3、双向数据绑定,让开发者不用再去操作DOM对象,把更多的精力投入到业务逻辑上;4、生态丰富、学习成本低。

聊聊如何利用 SVG 实现图片马赛克效果聊聊如何利用 SVG 实现图片马赛克效果Sep 01, 2022 am 11:05 AM

不借助 Javascript,如何利用 SVG 实现图片马赛克效果?下面本篇文章就来带大家详细了解一下,希望对大家有所帮助!

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

手把手带你使用Vue开发一个五子棋小游戏!手把手带你使用Vue开发一个五子棋小游戏!Jun 22, 2022 pm 03:44 PM

本篇文章带大家利用Vue基础语法来写一个五子棋小游戏,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

svg怎么转jpg格式svg怎么转jpg格式Nov 24, 2023 am 09:50 AM

svg可以通过使用图像处理软件、使用在线转换工具和使用Python图像处理库的方法来转jpg格式。详细介绍:1、图像处理软件包括Adobe Illustrator、Inkscape和GIMP;2、在线转换工具包括CloudConvert、Zamzar、Online Convert等;3、Python图像处理库等等。

Vue3.2中的expose是啥?有什么用?Vue3.2中的expose是啥?有什么用?Jul 08, 2022 am 11:06 AM

Vue3.2 中新出的 expose 是做啥用的?下面本篇文章带大家好好了解下Vue3.2的expose工具,希望对大家有所帮助!

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.