【Vue3】在Vue项目中如何使用svg-icon组件（Webpack）

Vite实现

安装插件

npm install svg-sprite-loader -D
//或者
yarn add svg-sprite-loader

package.json

ps:^的意思是大版本，就是6不变。～的意思是小版本，也就是第二位0，不变。此处指的是在node升级等方面的问题

下载图标（svg格式）

目录：src/assets/icons/svg/scan.svg

用到的是腾讯codesign，其他平台也能进行svg图片的下载

封装SvgIcon组件

目录：src/components/SvgIcon/index.vue
code:

<template>
  <svg :class="svgClass">
    <use :href="iconName" />
  </svg>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  iconClass: {
    type: String,
    require: true,
    default: ''
  },
  className: {
    type: String,
    default: ''
  }
})

const iconName = computed(() => {
  return `#myicon-${props.iconClass}`
})

const svgClass = computed(() => {
  if (props.className) {
    return 'svg-icon ' + props.className
  } else {
    return 'svg-icon'
  }
})

</script>

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

全局遍历svg文件

目录：src/assets/icons/index.js

//获取当前目录所有为.svg的文件
const req = require.context("./svg", false, /\.svg$/);
// 解析获取的svg文件名称并返回
const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext);
requireAll(req);

全局注册组件

目录：src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import registerDirectives from "./directives";
import pluginObject from "./plugins/plugins_object";
import pluginFunction from "./plugins/plugins_function";
import "@/assets/icons"; //引入icon的index
import SvgIcon from "@/components/SvgIcon";
// 修改后
const app = createApp(App);
registerDirectives(app);
// 注册组件
app.component("SvgIcon", SvgIcon);
app.use(pluginObject).use(pluginFunction).mount("#app");
// 修改前
// createApp(App).mount('#app')

使用组件

目录：src/App.vue

<template>
  <div id="app">
    <div class="svgText">
        <!-- 这里 -->
      <svg-icon icon-class="scan" />
    </div>
  </div>
</template>
<script lang="js">
export default {
  setup() {
  },
};
</script>
<style lang="scss" scoped>
.svgText {
  font-size: 50px;

  &:hover {
    color: turquoise;
  }
}
</style>

文件目录

.eslintrc.js

目录：.eslintrc.js

module.exports = {
  extends: ["plugin:vue/vue3-recommended"],
  rules: {
    "vue/multi-word-component-names": "off",
  },
};

vue3在vscode中的语法报错

解决：

1. 可能遇到es modul的报错，请安装最新版node，我用的是19.1.0
2. 可能遇到eslint的语法检查报错（es5和6语法没有成功转译），请用npm安装@babel/eslint-parser
3. 组件的驼峰写法问题，在Vue3中，引入组件时的驼峰写法兼容，也可使用带-的，均可被识别，具体看错误