Vue项目中使用Svg矢量图标

最新推荐文章于 2024-08-30 20:46:53 发布

橙子微笑

最新推荐文章于 2024-08-30 20:46:53 发布

阅读量864

点赞数 1

分类专栏： VUE 文章标签： vue npm svg

本文链接：https://blog.csdn.net/m0_44949211/article/details/107907671

版权

本文介绍了在Vue项目中如何使用Svg矢量图标。通过npm安装svg-sprite-loader，创建SvgIcon组件，设置icons目录，编写icons/index.js，并在main.js中引入。同时，对于vue-cli3以上版本，需要在vue.config.js中配置svg组件，最终可以在页面上方便地使用SVG图标。

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

#Vue项目中使用Svg矢量图标

使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装下载
在components目录下新建一个SvgIcon.veu组件，代码如下图

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

<script>
/**
 * 使用栗子
 *   <svg-icon icon-class="set"></svg-icon>
 */
export default {
   
  name: "SvgIcon",
  props: {
   
    iconClass: {
   
      type: String,
      required: true
    },
    className: {
   
      type: String,
      default