vue 项目引入 svg

这篇文章距离上次修改已过225天，其中的内容可能已经有所变动。

在Vue项目中引入SVG图片，可以通过以下几种方式：

直接将SVG文件放入项目的assets文件夹中，并在模板中通过img标签引用。

<template>
  <div>
    <img src="@/assets/logo.svg" alt="Logo">
  </div>
</template>

使用vue-svg-loader来在组件中导入SVG，并作为组件使用。

首先安装vue-svg-loader：

npm install vue-svg-loader --save-dev

然后在Vue组件中导入并使用SVG：

<template>
  <div>
    <svg-icon name="logo"></svg-icon>
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue';

export default {
  components: {
    SvgIcon
  }
};
</script>

SvgIcon.vue组件示例：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="`#${iconName}`"></use>
  </svg>
</template>

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

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

使用svg-sprite-loader将所有SVG图片构建为一个sprite图，然后通过symbol标签引用。

首先安装svg-sprite-loader：

npm install svg-sprite-loader --save-dev

配置webpack以使用svg-sprite-loader：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(/node_modules/)
      .end();

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(/node_modules\/feather-icons\/dist\/icons/)
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end();
  }
};

在组件中使用：

<template>
  <div>
    <svg class="icon">
      <use xlink:href="#icon-home"></use>
    </svg>
  </div>
</template>

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

以上是在Vue项目中引入SVG图片的几种方法，可以根据项目需求和偏好选择合适的方式。

vue 项目引入 svg

评论已关闭

推荐阅读