nuxt中使用svg

环境

  "nuxt": "^2.15.7",
  "nuxt-svg-sprite-loader": "^2.0.9",

准备工作

一、安装nuxt-svg-sprite-loader插件

npm install nuxt-svg-sprite-loader

二、创建SVG组件文件

<template>
//使用<client-only>标签是为了防止刷新后不显示问题
  <client-only>
    <svg :style="{ 
      width:width+'px',
      height:height+'px',
      fill:color
    }"
         :class="['svg-icon', svgClass]"
         aria-hidden="true">
      <use :xlink:href="svgName"></use>
    </svg>
  </client-only>
</template>
<script>
export default {
  name: "svgIcon",
  props: {
    iconName: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "#A1A1A1",
    },
    width: {
      type: String,
      default: "16",
    },
    height: {
      type: String,
      default: "16",
    },
  },
  computed: {
    svgName () {
      return `#icon-${this.iconName}`;
    },
    svgClass () {
      if (this.className) {
        return ` ${this.className}`;
      }
    },
  },
};
</script>
<style lang="scss" scoped>

</style>

三、填写插件（全局引入组件，解析所有.svg文件）

	#首先要在assets文件夹下创建一个名为svg文件夹把所有svg文件放进去

//引入vue对象
import Vue from "vue";
//定义、引用icons组件 组件复用
import svgIcon from "@/components/comm/SvgIcon.vue";
Vue.component("svg-icon", svgIcon);
//解析./svg文件夹里的所有 .svg 文件
const req = require.context("@/assets/svg", false, /\.svg$/);
const requireAll = requireContext => {
  return requireContext.keys().map(requireContext)
}
requireAll(req);
//require.context(‘./svg’, false, /\.svg$/) 参数说明：
//第一个：目标文件夹
//第二个：是否遍历子级目录
//第三个：定义遍历文件规则

四、nuxt.config.js 添加插件和打包规则

export default {
  modules: [
    ['nuxt-svg-sprite-loader', {
      symbolId: 'icon-[name]'
    }],
  ]
}

使用

 <svg-icon width="20"
           height="20"
           color="red"
           iconName='play'
           className="play"></svg-icon>