vue3.0封装svg-icon组件并使用

最新推荐文章于 2024-08-12 09:55:23 发布

置顶

落樱缤纷的夏天

最新推荐文章于 2024-08-12 09:55:23 发布

阅读量4.7k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/forward_zjh/article/details/109821751

版权

本文详细介绍了如何使用Vue CLI3.0搭建项目，并在components中创建SvgIcon组件，通过配置svg-sprite-loader处理SVG文件。将SVG图标放入指定文件夹，然后在main.js中引入，组件中只需通过icon-class引用SVG名字即可使用图标。记得安装svg-sprite-loader并在vue.config.js中配置。

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

过程

1.使用vue-cli3.0脚手架运行搭建一个项目
2.components文件下新建SvgIcon组件
3.将所需svg文件放置icons的svg文件夹下
4.main.js中引入icons文件
5.直接在组件中使用icon-class为svg名字的图标即可
6.注意：
- 1.安装svg-sprite-loader，
- 2.在vue.config.js文件下配置svg-sprite-loader
转载相关的网站：

1.使用vue-cli3.0脚手架运行搭建一个项目

在这里插入图片描述

2.components文件下新建SvgIcon组件

在这里插入图片描述
index.vue的内容如下：

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

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