vue3+vite使用vite-svg-loader，加载svg

jquerybootstrap

已于 2024-03-07 14:16:56 修改

阅读量2.6k

点赞数 10

文章标签： vue.js javascript 前端

于 2024-03-07 13:48:49 首次发布

本文链接：https://blog.csdn.net/jquerybootstrap/article/details/136531403

版权

安装

npm install vite-svg-loader --save-dev

vite.config.js配置

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

特别注意
vite-env.d.ts中添加，否则打包报错

/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />

使用

import SvgImage from './src/assets/my-image.svg?url'
<img :src="SvgImage" alt="My image" />

Inline SVG

import SvgImage from './src/assets/my-image.svg?raw'
<div class="svg-image" v-html="SvgImage"></div>

.svg-image:hover {
  color: green
}

Vue.js component

import SvgImage from './src/assets/my-image.svg?component'
<SvgImage width="20" />

动态组件引入

在src下创建icons，图标放在该目录下
在src/components下创建SvgIcon文件夹，在SvgIcon下创建index.vue

<template>
  <component :is="dynamicIcon" v-bind="$attrs" />
</template>

<script lang="ts" setup>
import { onMounted, shallowRef } from "vue";
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
});
const dynamicIcon = shallowRef<any>("");
const loadSvgIcon = async (iconName: string) => {
  try {
    // 动态导入SVG文件，这里假设SVG文件都在src/assets/icons目录下
    const { default: icon } = await import(
      /* @vite-ignore */ `../../icons/${iconName}.svg?component`
    );
    // 将导入的SVG文件设置为组件
    dynamicIcon.value = icon;
  } catch (error) {
    console.error("Error loading SVG icon:", error);
  }
};
onMounted(() => {
  loadSvgIcon(props.name);
});
</script>

在父组件中引用

import SvgIcon from "@/components/SvgIcon/index.vue";
<SvgIcon name="air" width="77" height="49" fill="#fff" />