首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

捆绑后SVG图标不呈现(webpack)

捆绑后SVG图标不呈现是指在使用webpack进行打包时,将SVG图标作为模块引入后,但在页面中无法正确显示的问题。

解决这个问题的方法有以下几种:

  1. 配置webpack的loader:在webpack配置文件中,可以使用file-loader或url-loader来处理SVG文件。这些loader会将SVG文件转换为base64编码的字符串,并将其作为模块引入。具体配置如下:
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.svg$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }
      ]
    }
  ]
}
  1. 使用svg-url-loader:svg-url-loader是一个专门用于处理SVG文件的webpack loader,它会将SVG文件转换为DataURL,并将其作为模块引入。具体配置如下:
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.svg$/,
      use: [
        {
          loader: 'svg-url-loader',
          options: {}
        }
      ]
    }
  ]
}
  1. 使用raw-loader:如果希望将SVG文件的内容作为字符串引入,可以使用raw-loader。具体配置如下:
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.svg$/,
      use: [
        {
          loader: 'raw-loader',
          options: {}
        }
      ]
    }
  ]
}

以上是解决捆绑后SVG图标不呈现的几种常见方法,根据具体情况选择适合的方式进行配置。腾讯云相关产品中,可以使用腾讯云对象存储(COS)来存储和管理SVG图标文件。具体介绍和使用方法可以参考腾讯云COS的官方文档:腾讯云对象存储(COS)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Iconfont 还是不能上传,如何维护你的 Icon?

最终方案:使用 svg 代替 iconfont 使用 svg 的优势 完全离线化使用,不需要从 CDN 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。...没有 unicode,不会因为抽离组件而造成图标冲突 在低端设备上 SVG 有更好的清晰度。 支持多色图标。...svg 转为 React Component 在 webpack 中我们可以使用一个 叫 svgr 的 loader,它可以将 SVG 转换为一个随时可用的 React 组件。...首先使用 npm 安装 @svgr/webpack npm install @svgr/webpack --save-dev 然后在 webpack.config.js 中加入配置 const webpack...svgr 官网可以的 palayround 可以实时预览转换的代码 我们只需要启动应用程序,Webpack 就会自动完成转换任务,再不需要再担心 SVG 了。

1.4K30
  • 聊一聊关于加快网站加载时间相关的 JS 优化技术

    JavaScript 文件也例外,优化它们的大小是提高网站性能的基本步骤。...以下是一些广泛使用的捆绑工具: WebpackWebpack 是一个功能强大且灵活的模块捆绑器,它不仅可以捆绑 JavaScript 文件,还可以处理样式表和图像等其他资产。...`; } // math.js export function calculate(x, y) { return x * y; } 使用 Webpack 或 Rollup 等捆绑工具,你可以将这些文件组合成一个捆绑文件...04、为图像和图标使用 Sprite 利用图像精灵是另一种减少网络请求和提高网站性能的技术。 精灵本质上是一个包含多个较小图像(例如图标或 UI 元素)的图像文件。...有几个工具可以帮助实现代码拆分,例如 Webpack 和 React.lazy: Webpack:这个流行的捆绑器提供对代码拆分的内置支持。

    30920

    深入了解加快网站加载时间的 JavaScript 优化技术

    JavaScript 文件也例外,优化它们的大小是提高网站性能的基本步骤。...以下是一些广泛使用的捆绑工具: WebpackWebpack 是一个功能强大且灵活的模块捆绑器,它不仅可以捆绑 JavaScript 文件,还可以处理样式表和图像等其他资产。...`; } // math.js export function calculate(x, y) { return x * y; } 使用 Webpack 或 Rollup 等捆绑工具,你可以将这些文件组合成一个捆绑文件...04、为图像和图标使用 Sprite 利用图像精灵是另一种减少网络请求和提高网站性能的技术。 精灵本质上是一个包含多个较小图像(例如图标或 UI 元素)的图像文件。...有几个工具可以帮助实现代码拆分,例如 Webpack 和 React.lazy: Webpack:这个流行的捆绑器提供对代码拆分的内置支持。

    25930

    【油猴脚本】在 Iconfont 上直接复制 React component 代码

    字体冗余 维护依赖 iconfont 平台 在组件开发的时候命名冲突 使用 SVG 的优点 完全离线化使用,不需要从 CDN 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。...在低端设备上 SVG 有更好的清晰度。 支持多色图标SVG 可以支持动画 并给出了最终方案,放弃使用字体,使用 SVG 代替 iconfont。...又给出了实践步骤: 老项目中的 iconfont, 可以通过 nodejs 脚本将下载的 iconfont.svg 转为多个 SVG 图标 新加的图标,可以直接在 iconfont.cn 上下载 SVG...React 项目中,如果要直接使用 SVG,需要配置 webpack loader —— @svgr/webpack 下面是 webpack.config.js 中要加入的配置 module.exports...接下来我们只需要通过 Dom api 获得当前点击元素的 SVG 代码 在每个图标的操作覆盖层加入一新图标,用于复制 react component 原先是块级布局,一列显示 3 行 为了减少页面空间

    2K20

    webpack5 实战五》之资源模块

    资源模块(asset module)是一种模块类型,它允许使用资源文件(字体,图标等)而无需配置额外 loader。...test: /\.png/, type: 'asset/resource' } } 指定图片打包之后的文件夹,如果指定默认打包到根目录。...打包的结果: 自定注入bundle.js 里: 4、另外一种输出文件名的方式 以html 文件为例,所有的html 文件都会被输出到static 目录下: webpack.config 文件loader...' }, 3、引入、打包验证结果 图片变成了base64 出现在bundlle.js 里 4、自定义 data URI 生成器 webpack 输出的 data URI,默认是呈现为使用...如果要使用自定义编码算法,则可以指定一个自定义函数来编码文件内容, 以 svg 图片为例,利用mini-svg-data-uri压缩编码格式 引入 svg 图片 npm 引入 mini-svg-data-uri

    77050

    Vue3!ElementPlus!更加优雅的使用Icon

    ,不要被标题欺骗,它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架,同样,它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte...,它依然适用。那我们为什么要改呢? 这可就要好好说道说道了。 PS:下文中 ElementUI 指的是适用于 Vue2 的组件库,ElementPlus 指的是适用于 Vue3 的组件库!...pnpm install @element-plus/icons-vue 使用图标 ElementPlus 的图标库由之前的 Icon Font 迁移了 SVG Icon,使用方式大不一样,我们只需要将所用到的图标引入再将图标名作为一个...安装插件 首先我们需要安装此插件: npm i -D unplugin-icons 使用插件 插件安装完成,使用起来也非常简单,我们以 Vue3 + VueCLI 为例,看看它是如何使用的,在 vue.config.js...自定义 SVG 图标 最后就是我们自定义的图标了,虽然 iconify 提供了超级多的图标库,ElementPlus 里也有一些,但有时候 UI 设计师总是按套路出牌,非得自己设计,,,当然,这也没有问题

    6.5K41

    AI编程助力 | vue项目从webpack迁移vite之后,启动仅需3s

    我们现在需要将webpack的代码和配置,修改为适配vite版本正常运行即可。【增加文章连接】vite改造“遇事决问春风,编程之事问豆包”。首先咨询一下豆包:如何从webpack迁移到vite。...3. svg插件改造我定义了一个Icon组件,将Element Icons、本地svg各类图标封装为统一入口。...图标文件而言,我们需要使用webpacksvg-sprite-loader插件,来加载静态的svg文件用作图标。...AI助手建议使用vite的rollup-plugin-svg插件来实现上述功能,我们根据插件使用手册,实现svg本地图标的加载。...修改的代码文件也同步到了仓库中。结语这就是我使用Marscode豆包IDE,在AI助手、编程助手以及各种丰富功能的帮助下,将vue项目从webpack架构替换成了vite。

    12731

    BuildAdmin04:vue加载本地svg图标

    svg图标实现 我没有使用上面的方式加载svg,原因是:我使用的是webpack,在编译时无法识别fs这种服务端读取文件的模块,就一直提示无法识别fs模块,最后虽然屏蔽了这些错误,但是同样读取不到svg...文件,所以就用使用webpacksvg-sprite-loader来加载svg。...1. svg-sprite-loader 先安装svg-sprite-loader npm i svg-sprite-loader -D 在vue.config.js中添加loader配置,以前webpack...配置都写在webpack.config.js中,后来改了。...结语 本篇文章主要讲了本地svg文件,如何通过Icon来渲染成图标,这一块与BuildAdmin的实现是完全不同的,就像在第一篇文章所写的,学习别人的东西,可以理解照抄,但遇到问题也能自己解决。

    37320

    从龟速 11s 到闪电 1s,详解前端性能优化之首屏加载

    48.9KB ⚡优化SVG图标 内容(点击展开/收起) 这一步我们来优化部分冗余的旧SVG图标被打包进去的情况,一般项目中SVG使用方式都是在iconfont生成JS然后引入。...这种做法 直观,每次都得去iconfont复制名称使用 每次增删改图标需要重新替换整个JS 不能按需加载,没使用到的也会一起打包,特别是UI换图标时一般不会将旧图标删除.......添加自定义SVG友善,必须上传iconfont添加到一起再下载 更优的SVG玩法 新增/修改图标 在iconfont下载UI上传或者其他地方找的任意SVG图标放入icons/svg/下 页面中使用全局...svg组件,传入复制下SVG的文件名即可 删除 只需要去掉使用的地方,然后删除对应图标即可 要实现上述效果,只需要 引入svg-sprite-loader // install npm i svg-sprite-loader...() } 复制代码 创建src/icons/svg并将图标放进去,并通过webpack的require.context自动导入 // src/icons/index.js const req

    2.7K10

    Vue项目中优雅使用icon

    svg文件有默认的url-loader 处理,我们要使用svg 图标需单独进行配置 下载一个插件svg-sprite-loader来单独处理我们的svg图标,它是一个webpack loader,支持将多个...cli的默认配置,怕改错,可通过vue inspect审查webpack内部配置,详细请看: inspect使用 上面代码中我们使用了webpack的链式高级用法来处理loader,首先排除了默认svg...,还远远不够,这样使用一个图标就得引入文件一次也太麻烦了,接着看下文 进阶-svg文件自动引入 知道为什么在icons/文件夹下还有一个存放svg文件的svg/文件夹吗,就是为了这一步自动化引入准备的...,这就很nice了 看看我们改进的使用方法: 注释掉之前的代码,在main.js中引入icons/index.js文件 import "@/icons/index.js"; 模板中使用和上面一样,不过这次改进当我们再次下载了一个...,我们还可以再简化,因为每次使用都得svg标签包着use太麻烦了,写着也不太雅观,我们继续简化,一定要看起来使用起来都十分优雅 再进阶-SvgIcon组件 在components/目录下新建SvgIcon

    2.2K20

    【第13期】webpack入门学习手记(五)

    webpack 本人微信公众号:前端修炼之路,欢迎关注。 前几天朋友聚餐突然想到,再过不到半年时间,第一批20即将出生。...这种感觉就像是,现在的90看60~ 一不小心我们这些90在20的眼中就变成了上个世纪的人。o(╯□╰)o 回顾webpack这个系列,结合自己使用的一个过程,是时候结束一下了。...网站中一般都会使用一些小图标和logo,有些小图标会做成雪碧图,有些并不会。后来通过搜索,发现其实可以将一些足够小的小图标制作成base64,将小图标写到css文件中,从而减少http请求数量。...image-webpack-loader 处理完小图标,我想到需要处理一下大图片。因为如果仅仅处理了小图标,影响似乎并不大。真正占流量的其实是图片。其实在做项目的时候,会将png图片进行一遍压缩。...image-webpack-loader可以压缩png、jpeg、gif、webp、svg。可以分别指定不同类型图片的压缩质量。

    1.4K10

    从零搭建react与ts组件库(二)less模块化与svg引入配置

    为了讲解如何进行less模块化配置以及如何引入svg作为组件库的一部分,我们设想这样一个需求:一个搜索输入框,左侧是一个svg的icon搜索图标,右侧是输入框。...实际上这是IDEA自带的ts在进行类型检测,仅仅是类型检查,实际上编译过程我们是调用的babel-loader+preset/typescript这条链路来完成的,所以并不影响编译的内容。.../src/external.d.ts" ] } 其中,"noEmit": true表明由ts进行类型检查,但是编译文件。include中的....将svg作为react组件来使用 我们知道,对于webpack来说,可以将一切的东西都是为模块,对于任何import进来的,webpack都可以通过匹配的规则(rules)调用对应的loader来进行处理...webpack,处理svg { test: /\.svg$/, use: ['@svgr/webpack'], } external.d.ts配置(配置理由和上述less配置一样,为了达到类型检查

    60630

    CSS 20大酷刑

    SVG (Scalable Vector Graphics) 1999年 矢量图形格式,可无限缩放,通过XML标记描述。 图标、图表、插图,适用于各种分辨率设备。...Webpack 5会自动分析代码并从构建的CSS中删除未使用的样式。...如果添加了 will-change 出现了性能问题,可以尝试移除它,看看是否有改善。 ---- 16. 采用 SVG 图像 可缩放矢量图形(SVG)通常用于标识、图表、图标和简单的图示。...SVG可以直接内联在CSS代码中作为背景图像。这对于「较小、可重复使用的图标非常理想」,并且避免了额外的HTTP请求。...「分块渲染:」 将页面内容分为不同的块或区域,并在加载完成每个块立即呈现。这样,即使页面的某些部分尚未完全加载,用户仍然可以浏览已经呈现出来的内容。

    21530

    我是如何让公司后台管理系统焕然一新的(上) -性能优化

    使用可视化工具分析打包的模块体积 我通过webpack-bundle-analyzer这个插件在每次打包能够更加直观的分析打包模块的体积,再对其中比较大的模块进行优化 ?...图标 相对于用一张图片来表示图标svg拥有更好的图片质量,体积更小,并且不需要开启额外的http请求,svg是一个未来的趋势,阿里的图标库iconfont支持导出svg格式的图标,但是在项目中需要封装一个支持...然后,所选图像呈现在元素占据的空间中。 在工程中我们可以这样使用 ?...这样在创建一个新的模块时,不需要在index.js中用import引入,在modules中再声明一遍了 全局组件和svg图标: ?...避免了每创建一个全局组件都需要引入,在调用一次Vue.component的过程,而当加载到Svg组件会自动扫描icons文件夹,将所有svg图标导入进来 有兴趣的朋友可以看看我另一篇介绍这个api的博客

    2.7K20

    当我尝试着把老项目 Webpack 迁移到 Vite 时,发现并没有这么香

    中间踩了一些坑, 好在最后爬出来了, 相关技术要点都会在下文中呈现。...在 HMR(热更新)方面,当改动了一个模块,仅需让浏览器重新请求该模块即可,不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高。...进去看一下源代码和编译的代码: 源代码: image.png 编译: image.png image.png typings 文件这不是好好的在这吗, 怎么就找不到?...想了一下:Vite 不知道 typeings 文件是不需要被编译的,需要告诉编译器编译这个文件。...无法识别 svg 我们在使用 svg 作为图标组件的时候, 一般是: import Icon from '@ant-design/icons'; import ErrorSvg from '@/assets

    12.8K92
    领券