【vue】vue中使用svg切图

小码助力助你前行

已于 2022-07-07 17:30:12 修改

阅读量579

点赞数 1

分类专栏： js vue 文章标签： vue.js javascript 前端

于 2022-07-07 17:20:03 首次发布

本文链接：https://blog.csdn.net/weixin_42575720/article/details/125663395

版权

本文介绍了在Vue项目中如何使用SVG图标，包括安装插件、封装SVG组件、创建图标文件夹、配置vue.config.js、引入图标以及在页面中使用的方法。同时，作者提供了遇到问题时的联系方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装插件

npm install svg-sprite-loader --save-dev

二、封装一个组件

在componemts里新建一个文件svgIcon.vue

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
   
  name: 'svg-icon',
  props: {
   
    iconClass: {
   
      type: String,
      required: true
    },
    className:</