vue2.0中使用svg

最新推荐文章于 2024-07-13 20:34:48 发布

一只肥鱼

最新推荐文章于 2024-07-13 20:34:48 发布

阅读量852

点赞数

文章标签： vue.js javascript 前端 svg

本文链接：https://blog.csdn.net/weixin_46421824/article/details/122208167

版权

本文介绍了在Vue2.0项目中如何使用svg图标，包括安装svg-sprite-loader和svgo插件，创建svgIcon组件，设置webpack配置，以及从iconfont下载SVG文件并引入到项目中的步骤。

摘要由CSDN通过智能技术生成

1、安装svg-sprite-loader和svgo插件
yarn add svg-sprite-loader svgo
2、在components文件夹下面增加svgIcon.vue组件

// svgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true" :width="swidth" :height="sheight">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
   
  name: "SvgIcon",
  props: {
   
    iconClass: {
   
      type: String,
      required: true
    },
    className: {
   
      type: String,
      default: ""
    },
    size: {
   
      type: [String, Number],
      default: 20
    }
  },
  computed: {
   
    iconName() {
   
      return `#icon-${
     this.iconClass}`;
    },
    svgClas