前端项目如何引入并使用没有symbolID的svg文件(vue3 + vite)

您所在的位置：网站首页 › svg里有没有互感器 › 前端项目如何引入并使用没有symbolID的svg文件(vue3 + vite)

前端项目如何引入并使用没有symbolID的svg文件(vue3 + vite)

2024-04-11 11:36| 来源: 网络整理| 查看: 265

前言

前端项目可能会使用到一些svg的图标来呈现高质量的页面效果，并且需要根据不同的状态或值进行动态的切换，如果svg文件的代码本身就没有指定id名，通过路径去引入可能会踩一些坑，因此记录一下引入svg文件的方式。

一、使用插件

这是成本最小的方法，适合快速开发，例如在vue3+vite的项目可以使用 vite-plugin-svg-icons 插件。

1、下载插件 yarn add vite-plugin-svg-icons -D # or npm i vite-plugin-svg-icons -D 2、配置插件

在vite.config.js文件中配置插件：

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' export default ({ mode }) => { return defineConfig({ plugins: [createSvgIconsPlugin({ // 指定需要缓存的图标文件夹，该路径存放的就是需要读取的svg文件 iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 指定symbolId格式 symbolId: 'icon-[name]' })] }) } 3、引入插件

在main.js中引入注册文件：

import 'virtual:svg-icons-register' 4、创建SvgIcon组件 // SvgIcon.vue import { computed } from 'vue' const props = defineProps({ iconClass: { type: String, required: true }, svgClass: { type: String } }) const iconName = computed(() => { return `#icon-${props.iconClass}` }) .svg-icon { width: 1em; height: 1em; fill: currentColor; overflow: hidden; } 5、全局注册组件

在main.js引入组件并注册，就可以使用啦！

import { createApp } from 'vue' import App from './App.vue' import 'virtual:svg-icons-register' import svgIcon from "@/components/SvgIcon/index.vue" createApp(App) .component('svg-icon', svgIcon) .mount('#app')

使用：

二、通过异步方法获取svg文件代码

那如果是不能够使用插件的情况下，可以通过异步的方法，使用相对路径去引入svg文件。以下是列举几个需要使用到的方法：

1、获取svg文件的路径的方法 // 该方法可以获取文件，但可能打包会有问题，仅做参考 const getIconPath = (name) => { return new URL(`./assets/icons/${name}.svg`, importa.url).href } 2、为svg代码设置其他属性的方法 // 参数1是svg代码，参数2是需要设置的id，适用于svg文件无id名的情况 const addIdToSVG = (svgContent, id) => { const parser = new DOMParser(); const doc = parser.parseFromString(svgContent, 'image/svg+xml'); const svg: any = doc.querySelector('svg'); svg.setAttribute('id', id); svg.setAttribute('height', String(props.size)); svg.setAttribute('width', String(props.size)); return svg.outerHTML; } 3、请求svg文件代码的方法 const fetchSvg = (path) => { fetch(path) .then((response) => response.text()) .then((data) => { const svgWithId = addIdToSVG(data, `my-svg-${props.icon}`) currentIcon.value.innerHTML += svgWithId; // 此处的currentIcon.value为需要放置图标的容器 }) .catch((error) => { console.error('Error loading SVG file: ', error); }) }

上述三个方法的使用分别是先用方法1获取到svg文件路径，再用方法3请求到svg文件的代码，最后对svg文件代码进行处理后插入到容器展示。

4、注意事项

上述1的方法之前在打包后会有路径错误的问题，具体是怎么导致的还没发现原因，如果有小伙伴知道求告知🙏。因为路径错误，所以我又想到了import的异步导入，具体实现如下：

import(`./assets/icons/${name}.svg`) .then((res)=>{ fetchSvg(res.default) }) .catch((error) => { console.error('Error loading SVG file: ', error); }) 5、完整代码 // SvgIcon.vue import {ref} from 'vue' const props = defineProps({ icon: { type: String }, size: { type: Number } }) const currentIcon = ref() const addIdToSVG = (svgContent: any, id: string) => { const parser = new DOMParser(); const doc = parser.parseFromString(svgContent, 'image/svg+xml'); const svg: any = doc.querySelector('svg'); svg.setAttribute('id', id); // 设置symbolID svg.setAttribute('height', String(props.size)); // 设置尺寸 svg.setAttribute('width', String(props.size)); return svg.outerHTML; } const fetchSvg = (path: string) => { fetch(path) .then((response) => response.text()) .then((data) => { const svgWithId = addIdToSVG(data, `my-svg-${props.icon}`) currentIcon.value.innerHTML += svgWithId; }) .catch((error) => { console.error('Error loading SVG file: ', error); }) } import(`./assets/weather/icons/${props.icon}${ props.fill ? '-fill' : '' }.svg`) .then((res)=>{ fetchSvg(res.default) }) .catch((error) => { console.error('Error loading SVG file: ', error); }) 7、使用总结

以上就是两种在svg文件没有symbolID且需要动态改变的情况下引入svg文件的两种方法，如果大家还有其他更好的方法可以交流一下，谢谢！

【本文地址】

前端项目如何引入并使用没有symbolID的svg文件(vue3 + vite)

前端项目如何引入并使用没有symbolID的svg文件(vue3 + vite)

今日新闻

推荐新闻