vue使用svg图片

最新推荐文章于 2024-08-13 21:55:43 发布

杨家八公子

最新推荐文章于 2024-08-13 21:55:43 发布

阅读量2.8k

点赞数

分类专栏：图片 svg 文章标签： vue svg svg图片

本文链接：https://blog.csdn.net/jerryyang_2017/article/details/107861161

版权

图片同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

svg

1 篇文章 0 订阅

订阅专栏

第一步在阿里巴矢量图库选中图片下载symbol格式的
将下载的素材存放在static文件夹下
然后在mian.js里面添加下面代码

import "../static/iconfont.js"
import "../static/iconfont.css"

然后写组件


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

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

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

然后引入组件使用