vue使用svg图片

原创于 2020-08-07 14:14:08 发布 · 2.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

图片

svg

本文介绍如何从阿里巴矢量图库下载并集成SVG图标到项目中，包括下载symbol格式图片，放置于static文件夹，通过在main.js中引入iconfont.js和iconfont.css文件，创建和使用SVG图标组件的全过程。

第一步在阿里巴矢量图库选中图片下载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>

然后引入组件使用