SVG sprite不工作-图标显示在堆栈上

SVG sprite是一种将多个SVG图标合并到一个文件中的技术。它通过减少HTTP请求次数和文件大小来提高网页加载速度，并且可以方便地管理和使用各种图标。

当SVG sprite中的图标显示在堆栈上时，可能是由于以下原因导致的问题：

CSS选择器问题：请确保在使用SVG sprite时，正确地使用了CSS选择器来指定要显示的图标。检查选择器是否正确，并确保它与HTML元素的类或ID匹配。
图标路径问题：检查SVG sprite文件中的图标路径是否正确。确保路径与HTML文件中引用SVG sprite的路径一致。
CSS属性问题：检查CSS属性是否正确设置。例如，检查宽度（width）和高度（height）属性是否正确设置为适当的值。
图标命名冲突：如果SVG sprite中的图标具有相同的ID或类名，可能会导致显示问题。确保每个图标具有唯一的ID或类名。
缓存问题：如果您最近对SVG sprite进行了更改，请确保清除浏览器缓存，以便加载最新的文件。

对于解决SVG sprite不工作的问题，可以尝试以下步骤：

检查SVG sprite文件的路径和命名：确保SVG sprite文件的路径和文件名正确，并与HTML文件中引用SVG sprite的路径一致。
检查CSS选择器和属性：确保正确地使用CSS选择器来指定要显示的图标，并检查CSS属性是否正确设置。
检查图标命名和ID：确保SVG sprite中的每个图标具有唯一的ID或类名，以避免命名冲突。
清除浏览器缓存：如果您最近对SVG sprite进行了更改，请清除浏览器缓存，以便加载最新的文件。

腾讯云提供了一系列与云计算相关的产品，其中包括对象存储（COS）、云服务器（CVM）、云数据库（CDB）、内容分发网络（CDN）等。您可以根据具体需求选择适合的产品。更多关于腾讯云产品的信息和介绍，您可以访问腾讯云官方网站：https://cloud.tencent.com/

相关·内容

从 Web 图标演进历史看最佳实践

1.6K1 0

该如何正确的使用SVG sprites？

当下流程的移动端，手机型号太多太多，今天工作项目中突然发现还有同事在使用以前大家曾经包括现在还很熟悉的CSS 图片精灵，被我们的测试MM找来说图片在iphone6、iphone plus、iphone...然后同事说一个一个的图标好麻烦，我说可以用svg sprite啊，～～＞﹏＜，这个时候轮到同事一脸懵逼了……，所以想着可能是不是同样还有很多同学也不知道SVG symbols呢，那么这就给大家分享一下：...结果是否定的，什么都不会显示：那么该如何摆正姿势，正确的使用它呢？高潮部分来了：首席填坑官∙苏南的专栏为什么图标会显示呢？...因为要显示图标，我们还需要使用元素，通俗的讲就是你定义了一组图形对象（使用元素）之后，可以使用元素来对它进行无限次实例化展示。...，还有颜色的改变，我们可以直接在svg内的 path上写行内式 fill="#06c"、style="fill:#06c";都是可以的，在维护上，是不是比图片更加方便呢？？？

2.1K2 0

位图和SVG用法比较

提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。...这个例子里集合8个24×24 图标在一个大小为192×24 图片中。...而且在交互性上要优于位图图片；你可以使用图片名称来引用SVG对象，相比于通过手动计算像素位置通过CSS样式定位图片，显然方便了很多。...在使用之前，我们先创建一个很简单的SVG，包含三个独立图标：一个绿色的圆形、一个红色的方形和一个蓝色的三角形。因此，如果我们可以通过定制链接来显示目标对象，例如，SVG文件名称为 sprite.xml，我们通过在URL中添加哈希值来指定目标对象，如sprite.xml#circle ，我们就可以仅显示圆形所在图层

2.9K6 0

Vue项目中优雅使用icon

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。...，早在14年张鑫旭的一篇帖子 SVG Sprite介绍完美诠释了svg sprite的工作方式，并且对其很看好，或许这就是大佬的眼光吧 - _ - 单纯使用iconfont官方那种symbol方式其实是有点...搭建项目怎么样才算优雅，首先我们在src目录下新建icons/文件夹，在icons/文件夹下建svg/文件夹，将来我们项目中的svg图标都会统一放在这里接下来我们在官网搞来一个svg图标点击svg...不，还远远不够，这样使用一个图标就得引入文件一次也太麻烦了，接着看下文进阶-svg文件自动引入知道为什么在icons/文件夹下还有一个存放svg文件的svg/文件夹吗，就是为了这一步自动化引入准备的...不，我们还可以再简化，因为每次使用都得svg标签包着use太麻烦了，写着也不太雅观，我们继续简化，一定要看起来使用起来都十分优雅再进阶-SvgIcon组件在components/目录下新建SvgIcon

2.2K2 0

为什么要用SVG？- svg与iconfont、图片多维度对比

，SVG上面我说过它是图形所以在浏览器中使用的是图形渲染，所以SVG却没有这种问题，请看下图对比：详细的原因可查看我之前写的这篇文章《高清ICON SVG解决方案(上)》 2.icon font只能支持单色...在维护性方面：做成SVG对设计师之前的工作量也有一定的提升，过去他们同一个图不同尺寸在PS输出都需要调整一次图形，因为如果直接等比例缩放图形尺寸，会出现图片有锯齿。...项基本上是碾压了icon font，数据如下：页面图标数量：491个上图SVG案例中我用了两种不同引用方式，一种是在页面直接inline svg方式插入的方法和用svg sprite合并后引用图标的两种...，结果显示svg sprite的性能是最高的。...2、大批量的测试结果SVG性能已经比较有保证了，但实际项目中一个页面不可能会存在这么多图标，我们按正常页面出现图标10-30个这个区间， _取15个图标为中间值在进行一次测试看看，结果如何：页面图标数量

5.4K5 0

Web图标的工程化方案

，然后根据 background-position 来显示不同的图片。...优势：能够容易地改变图标的颜色，尺寸矢量图不失真兼容所有流行的浏览器，在h5和app上都能使用替换图标和新增图标也非常简单，也不需要考虑图标合并的问题劣势：只支持单色图标字体渲染，低倍屏下容易出现锯齿...微信图片_20191231153104.png svg sprite svg意为可缩放矢量图形，它不会像位图一样因为放大而失真，他在不同分辨率下的表现都一样清晰。...github在16年的时候已经使用svg替代iconfont，ant design在 3.9.0 之后，使用了 svg图标替换了原先的 font 图标。...在实际项目中我们会有很多图标，将零散的svg合并，每个图标有唯一的symbol，通过symbol来引用。将symbol定义插入到页面body中，然后在需要使用的地方通过引用。

1K1 0

Vue 项目引入 SVG 图标

Vue 项目引入 SVG 图标关于 SVG SVG 是一种可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。...SVG 在既能满足现有图片的功能的前提下，又是矢量图，在可访问性上面也非常不错，并且有利于 SEO 和无障碍，在性能和维护性方面也比 icon font 要出色许多。...icon font 可读性不够好，icon font 主要在页面用 Unicode 符号调用对应的图标，对浏览器和搜索引擎不友好安装依赖在 vue 项目中引入 svg，首要工作是安装依赖包 svgo...和 svg-sprite-loader，这两个工具包都是给 webpack 打包 svg 图标资源使用。...loader .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader')

2K2 0

SVG 图标在React项目中的优化

loader: 'svg-react-loader', } 在 React 组件中的引入方式： import Test from "....第一种方法第一种方法是把所有的图标通过元素定义在 SVG 代码中，嵌入在元素中的图标是不会被直接显示的。...通过使用元素的 xlink:href=”#id” 来引用单个图标。...> 在需要引入单个图标的时候：这里我们使用 svg-sprite-loader 来自动生成 svg 雪碧图。...的 viewbox 属性来指定显示 SVG 画布的区域，跟 background-position 原理差不多。

3.6K1 0

如何在VUE项目中引入SVG图标

前言 SVG（即“可缩放矢量图形”）图标在诸多场合下，往往胜过一般的位图标记（例如PNG、JPG、GIF等）。...可无穷缩放：由于SVG为矢量图，故可在图像质量不损失的环境下进行无限缩放，此对于开发高DPI（即“屏幕像素密度”）显示装置，例如Retina屏的网页应用，大有裨益。...安装 npm i svg-sprite-loader --save 二. 在components文件夹中，建新文件夹曰SvgIcon，再于文件夹下建新文件，名之曰index.vue。...其成立之目的，正是为了使吾等在项目中使用 SVG 图标时能变得更为便捷。 name: 'SvgIcon' 此组件接受两属性，名若iconClass及className。...图标；例若 iconClass 之值为 logo，则显示名为 logo 之 SVG 图标矣。

7181 0

在 Vue 项目中更优雅的使用 icon

随着前端的发展，icon 使用方案落在了 svg 上，svg 有着矢量图的优势，可以无限放大而不失真，而且 svg 本身就是一种 XML 文件，可以直接在 HTML 中使用，也可以通过 CSS 进行样式控制...，但是在 Vue 项目中使用 svg 时，我们会遇到一些问题，本文将介绍如何在 Vue 项目中更优雅的使用 svg icon。...工具 svg-sprite-loader svgo-loader svg-sprite-loader用来打包 svg 图标，svgo-loader 来精简我们的 svg 内容。...在 src/main.js 中引入所有的 svg 图标，之后可在文件夹自行添加或者删除图标，所以图标都会被自动导入，无需手动操作： import Vue from 'vue' import SvgIcon...大小图标可从 iconfont 项目中下载或者由 UI 切图，同一个项目中使用的 Svg Icon 图标建议统一大小规格，比如 128*128。

4954 0

解锁SVG新姿势：ChatGPT绘制图标+SVG Symbol自动导入

这使得SVG图标具有可缩放性，适合在不同分辨率的设备上使用。同时，SVG图标可以用作网站的某些元素，例如logo、导航菜单等。再众所周知，ChatGPT具有生成代码的能力。...在该步骤，需要注意两个点。需要导入svg-sprite.ts文件务必在主文件中导入该文件： // App.tsx import "....由于我们全量引用了图标，会导致在所有页面，都会导入所有icon，原因是我们在svg-sprite.ts文件中做了自动化导入，我们亦可通过单行导入的方式来避免全量引入，我目前在思考有没有什么更好的方案解决该问题...这些方法可以使得在代码中使用SVG图标更加方便和高效。...综上所述，通过使用ChatGPT自动生成SVG代码和使用Webpack和svg-sprite-loader自动导入SVG Symbol，我们可以更加便捷地在代码中使用SVG图标，提高开发效率和代码质量。

3.3K1 0

该如何以正确的姿势插入SVG Sprites？

—苏南(South·Su)，今天要给大家分享的是 SVGSprites(也叫雪碧图)，所谓雪碧图，当然就不是我们常喝的雪碧饮料（Sprites）哦，哈哈～　　当下流程的移动端，手机型号太多太多，今天工作项目中突然发现还有同事在使用以前大家...然后同事说一个一个的图标好麻烦，我说可以用svg sprite啊，～～＞﹏＜，这个时候轮到同事一脸懵逼了……，所以想着可能是不是同样还有很多同学也不知道 SVG symbols呢，那么这就给大家分享一下...} 　　可能大家就有点疑惑了，为什么这样引入图标会显示呢？...因为要显示图标，我们还需要使用元素，通俗的讲就是你定义了一组图形对象（使用元素）之后，可以使用元素来对它进行无限次实例化展示。...里的坐标，还有颜色的改变，我们可以直接在svg内的 path上写行内式 fill="#06c"、style="fill:#06c";都是可以的，在维护上，是不是比图片更加方便呢？？？

6364 0

如何在Vue项目中更优雅地使用svg

每次要使用图标都得写这么一段代码，并不是很方便，是否可以像使用组件那样使用图标？这里的关键是使用 svg-sprite-loader 这个插件。...svg-sprite-loader 对图标文件夹里面的 .svg 文件进行处理： const path = require('path') function resolve(dir){ return.../icons')) .end() .use('svg-sprite-loader') .loader("svg-sprite-loader") .options({symbolId...封装图标组件在 components/common/icon 下新建一个 SvgIcon.vue 文件： <svg :fill="iconColor" class="svg-icon...所以才使用了 svg-sprite-loader 插件，这样每次新增图标，只需要下载图标并放到对应文件夹即可。

12.6K2 1

浅谈SVG Sprite

随着前端技术的发展，有越来越多的方法实现icon的制作，同时为了满足市面上各种大屏幕分辨率，字体图标icon font应运而生，字体图标的制作也是一种全新的设计方式，但是icon font 在windows...系统下，字体较小时，锯齿问题比较严重，那么今天要讲的svg sprite，不仅可以随意改变图标大小不会产生锯齿，还能随心所欲的填充颜色。...下面来来介绍一下矢量图形SVG Sprite在页面中的应用。第一步：制作SVG图标首先的准备一套SVG图标，我们直接到icomoon.io上下载。 1.选中图标 ? 2.点击Generate ?...然后我们可以在解压文件中，找到对应的svg图标文件夹。 ? ? 第二步：合并SVG图标准备好svg图标后，我们需要把多个svg图标整合到一个svg文件中。...运行命令后，可以看到成功创建了sprite.svg文件 ? 第三步：应用我们来看下生成文件的源代码： ? 再来看看浏览器里页面的效果~~~ ? 到这里svg sprite 图标就已经完成了。

1.1K9 0

Vue3 使用 svg-sprite-loader 实现 svg 图标按需加载

前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载...> 这里将 svg 图标中对应的图标颜色值改为字符串 currentColor，方便使用时控制图标实时颜色将图标放在特定文件夹下，这里以 @/assets/svg 中导入的 svg 为例 2、安装...svg-sprite-loader npm i svg-sprite-loader 3、配置 vue.config.js const path = require("path"); module.exports...svgRule.uses.clear(); svgRule .use("svg-sprite-loader") .loader("svg-sprite-loader")...，传入 size 属性控制图标大小，传入 color 属性控制图标颜色 <svg class="svg-icon" :style="{ width:

7.4K3 1

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片，到后来的使用css sprite来减少服务器请求，再到流行的图形字体化图标Iconfont。现在，一种全新的图标使用方式开始流行了起来——SVG symbols图标。...工作原理 SVG symbols的工作原理：symbol元素用来定义一个图形模板对象，它可以用一个use元素实例化。...symbol元素对图形的作用是在同一文档中多次使用，symbol元素本身是不呈现的。...> 这段代码使用SVG symbols定义了两个图标，每个symbol元素定义一个图标，图标id分别是heart和arrow，将其放在html文件的body元素内。...自动化处理更多内容请查看原文：使用SVG symbols建立图标系统完整指南

6342 0

为你重新系统梳理下， Web 体验优化中和图有关的那些事（万字长文）

在平时开发工作中，可使用以下常用图标字体库： IconFont 阿里巴巴矢量图标库使用方法详见 IconFont 图标库官方文档。 IcoMoon 使用方法详见 IcoMoon官方文档。...image ◎ 多倍图在 Retina 视网膜屏幕面世之前人们很少关注像素密度与设备像素比，随着 Retina 屏在移动设备中越来越广泛地应用，为了保证图片在不同 DPR（设备像素比）的设备上显示足够清晰...在 DPR 为 2 的设备（二倍屏）上，使用 2 * 2 个物理像素展示一个 CSS 像素。在 DPR 为 3 的设备（三倍屏）上，使用 3 * 3 个物理像素展示一个 CSS 像素。 ?...自适应 DPR 加载图片在高分辨率显示屏如 2x 上，在页面中使用二倍图可以保证清晰度，但是当此页面在低 DPR 设备打开时，我们只需要 50% 长宽的图片就能保证显示效果，而此时带宽开销却是一样的。...由于元素可以在高对比度模式下显示，故而在此场景下，使用基于标签的 Sprite 技术，可以得到比基于 CSS 背景图的 Sprite 更多的收益。

1.3K2 0

BuildAdmin04：vue加载本地svg图标

然后定义了一个svg组件（这个在后面的实现中细讲）。最后就是在vite中加载这些svg文件，在Icon中使用svg时，会指向这些文件。...文件，所以就用使用webpack的svg-sprite-loader来加载svg。...1. svg-sprite-loader 先安装svg-sprite-loader npm i svg-sprite-loader -D 在vue.config.js中添加loader配置，以前webpack...这里的include中指定svg的目录，test是目标svg的正则表达式，symbolId是加载的svg图标的新命名，在原本svg的name之前，加了一个 local- 前缀。 2....然后就是在main.ts中调用加载方法，完成svg文件到图标的加载。 3.

3502 0

前端项目搭建实战（Vue）

>export default { name: 'SvgIcon', props: { // svg图标名称 name: { default: '', }...图标了，我们还需要做的就是将 svg 文件加载到内存中， svg-sprite-loader 的官方解释是：一个用于创建 svg 雪碧图的 Webpack 加载器。...通俗的讲：svg-sprite-loader 会把你引入的 svg 塞到一个个 symbol 中，合成一个大的 svg，最后将这个大的 svg 放入 body 中。...config.module.rule('svg').exclude.add(resolve('src/svg')); // 添加svg-sprite-loader config.module...) // add完上下文进入数组，使用end回退 .use('svg-sprite-loader') // 添加loader .loader('svg-sprite-loader') //

1.8K7 3

VUE项目iconfont自定义SVG（非SVG文件）-_PUSDN

简述 VUE项目iconfont自定义SVG,在线或者离线下载的阿里巴巴icon font.js；并非SVG文件；前情提示 VUE2；在线或者离线下载的阿里巴巴icon font.js；并非SVG...部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤ 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行创建iconfont项目并配置...相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：支持多色图标了，不再受单色限制。...', svgIcon); 最终效果其他单个VUE组件中引入在线CDN 也可以全局在index.html全局引入。...文件，需要，此处不做SVG介绍 npm install --save-dev svg-sprite-loader 或者 yarn add svg-sprite-loader -D 或者查看ant design

2883 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云