首页 新闻 赞助 找找看

vite-plugin-svg-icons

0
[待解决问题]

vite-plugin-svg-icons 打包之后 svg图标不渲染
开发环境可以
请指教

anluo小毛虫的主页 anluo小毛虫 | 菜鸟二级 | 园豆:354
提问于:2023-05-11 10:57
< >
分享
所有回答(2)
0

如果在打包部署之后 SVG 图标不渲染,但是在开发环境中可以看到图标,可能是以下几个参数配置不对:
1.
iconfont 插件:确保已经安装了 iconfont 插件,并且在项目中正确配置了 iconfont 的路径。可以通过在 vite.config.js 中添加 plugin 配置来启用该插件:
2.
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue';
import { iconfont } from 'vite-plugin-svg-icons';

export default defineConfig({ 
plugins: [ 
createVuePlugin({ 
iconfont, 
}), 
], 
});

1.icon 配置项:确保在 icon 配置项中使用的图标符号路径是正确的。在 SVG 图标资源中,需要将图标符号的路径指定为 src 属性,而不是 href 属性。例如,data-src 属性可能无效,因为 SVG 图标通常使用 <use xlink:href="url('图标路径')" /> 的方式引用图标符号。
2.style 配置项:确保在 style 配置项中指定的样式名称和类名称是正确的。SVG 图标资源中的样式通常使用 class 属性指定。
如果以上配置项都已经正确配置,但仍然无法在开发环境中看到 SVG 图标,请检查您的 SVG 图标资源是否符合规范,并且在打包部署之前是否已经成功渲染。您可以在 SVG 图标资源中添加 <svg> 标签,并在 <svg> 标签中使用 <use> 标签引用图标符号。如果您使用的是 <use xlink:href="url('图标路径')" /> 的方式引用图标符号,请确保将 xlink:href 属性指定为正确的图标符号路径。

lanedm | 园豆:2378 (老鸟四级) | 2023-05-13 11:34

好滴 谢谢

支持(0) 反对(0) anluo小毛虫 | 园豆:354 (菜鸟二级) | 2023-05-16 11:36
0

根据您提供的信息,我们可以初步判断问题可能出在打包后的代码中。在开发环境中,您可能已经配置好了相关的构建工具或者开发服务器,以支持 SVG 图标的渲染。但是在打包后的代码中,可能会出现一些问题,导致 SVG 图标无法正常渲染。

以下是一些可能的原因和解决方法:

文件路径问题:在打包后的代码中,SVG 图标的路径可能会发生变化。您需要检查打包后的代码中 SVG 图标的路径是否正确。如果路径错误,浏览器将无法加载对应的 SVG 文件。您可以使用浏览器的开发者工具检查 SVG 文件是否已成功加载。

代码压缩问题:在某些情况下,代码压缩可能会影响 SVG 图标的渲染。一些压缩工具可能会修改 SVG 文件的格式,从而导致浏览器无法正常解析 SVG 文件。您可以尝试禁用代码压缩,或者在代码压缩之前将 SVG 文件转换为 Base64 编码的字符串,以避免这个问题。

Webpack 配置问题:如果您使用 Webpack 进行打包,可能需要配置相应的 loader,以支持 SVG 图标的加载和渲染。您可以检查 Webpack 配置文件中是否包含 SVG 文件的 loader,并确保其正确配置。您可以参考 Webpack 的官方文档以了解如何正确配置 SVG loader。

浏览器兼容性问题:一些旧版本的浏览器可能不支持 SVG 图标的渲染。您需要检查您的 SVG 文件是否符合 SVG 标准,并且在需要支持旧版浏览器的情况下,提供相应的兼容性处理。

以上是一些可能导致 SVG 图标无法渲染的原因和解决方法。由于具体情况可能各不相同,您可以根据具体情况进行调试和排查。您也可以提供更详细的信息,以便我们提供更准确的解决方法。

Technologyforgood | 园豆:5244 (大侠五级) | 2023-05-14 22:53

好滴 了解,我这个不单纯是在一个项目使用,qiankun 父 子包类似的引用使用,搞不清楚是那出现了问题

支持(0) 反对(0) anluo小毛虫 | 园豆:354 (菜鸟二级) | 2023-05-16 11:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册