当我将SVG图像导入到我的Icon对象中时，为什么它不显示？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

Svg矢量图封装使用

SVG 图标本质上是矢量图形，因此无论放大还是缩小，图像都不会失真，这使得它们在响应式设计中表现尤为出色。此外，通过封装 SVG 图标，可以将图标的样式和行为与组件紧密结合，简化管理和重用的过程。...)) /** * 外部图标样式 */ /** * mask: 是一个 CSS 属性，用于将图像用作元素的遮罩。...遮罩定义了 * 哪些部分应该显示（图像的白色或透明部分），哪些部分应该隐藏 * （图像的黑色部分）。no-repeat 50% 50% 表示图像不会重复，并且会居中放置。...,所以尽量下载到本地项目中进行使用 4、内部引用svg图标收集待使用的svg图标，下载放置项目的src/icons/svg/的文件夹中,如放入一个vuejs_icon.svg图标 5、完成导入所有的svg...// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标 // 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入

1.6K1 0

React 造轮子系列：Icon 组件思路

本文的 Icon 组件主要是参考 Framework7 中的 Icon React Component 写的。...使用 svg-sprite-loader 加载 SVG 在上面我们指定了 Icon 的name为wechat,那怎么让它显示微信的图标呢,首先在阿里的 Iconfont 下载对应的 SVG image.png...接着如何显示 svg?...svg> ) } export default Icon 运行效果： image.png 当然 svg 里面不能直接写死，我们需要根据外部传入的 name 来指定对应的图像...image.png importAll 大家有没有注意到，我需要使用哪个 svg, 需要在对应的 icon 组件导入对应的 svg,这样要是我需要100个 svg ，我就要导入100次，这样做太傻

5.3K7 0

您找到你想要的搜索结果了吗？

是的

没有找到

React 造轮子系列：Icon 组件思路

本文的 Icon 组件主要是参考 Framework7 中的 Icon React Component 写的。...使用 svg-sprite-loader 加载 SVG 在上面我们指定了 Icon 的name为wechat,那怎么让它显示微信的图标呢,首先在阿里的 Iconfont 下载对应的 SVG image.png...接着如何显示 svg?...运行效果： image.png 当然 svg 里面不能直接写死，我们需要根据外部传入的 name 来指定对应的图像： // 部分代码 import '...., 需要在对应的 icon 组件导入对应的 svg,这样要是我需要100个 svg ，我就要导入100次，这样做太傻，文件也会变得冗长。

2.6K2 0

分享 63 个面向前端开发人员的开源项目工具

02、Mono Icon 地址：https://icons.mono.company/ Mono Icon 是一个开源图标，我们可以轻松快速、完全免费地将其应用到我们的网站上。...，可以轻松地编辑网页的 SVG 图像。...：https://mailgo.dev/ 通常，当我们打开邮件链接时，浏览器将使用默认应用程序打开电子邮件编辑器。.../home CSS Spider 是 Google Chrome、Firefox 的扩展，主要任务是帮助我们查看属性并获取网页中任何对象的 CSS 代码。...59、Pretty Snap 地址：https://prettysnap.app/ Pretty Snap 是一种工具，可帮助我们为要在网页中显示的图像创建漂亮的背景。

5.5K4 0

iconfont矢量图标旋转晃动

这个svg图像做成图片不会出现晃动，那么问题到底出在哪里呢？让我们继续探索。...(PS:页面中使用的图标是将svg图像传到iconfont网站处理以后，然后导出为字体矢量图标引用到页面中。)...2.问题探索经我打开控制台仔细查看发现，我给这个icon-181元素 (即这个字体矢量图标的父元素)设置的font-size是20px，可是显示的字体矢量图标元素大小却是20*21。...是不是我使用的这个svg图像有问题，导致了它转换成字体矢量图标以后出现了这样的情况？...将使用的这个图标的SVG图像导入这个网站生成了一遍，把从这个网站下载下来的字体样式加载到我这里使用。引入字体样式进来以后，查看矢量图标元素大小。

5.6K1 0

高效地将 TailwindCSS 与 Nuxt 结合使用

我们还将了解如何将 SVG 图标与 TailwindCSS 一起使用，而不是直接使用图像或 SVG 图标，以及如何基于给定图像为 TailwinCSS 构建自定义调色板。...接下来，我们需要将内置的 TailwindCSS 样式加载到我们的应用程序中。加载 TailwindCSS 样式默认情况下，Nuxt TailwindCSS 模块将从....接下来，让我们看看如何利用 TaiwindCSS 在应用程序中构建和使用图标，而不是直接使用图像或 SVG 图标的经典方式。...我们可以为网站上显示的每个图标选择各种选项，从 Vue 组件和 React 组件到简单的 SVG 文件。您可以下载所需图标的相关代码段并将其复制并粘贴到您的应用程序中。...该工具允许我们上传图像，它将以 TailwindCSS 格式生成四种主要调色板及其色调，如以下屏幕截图所示：剩下的就是将生成的代码复制并粘贴到您的tailwind.config.ts文件中，然后您就可以在应用程序中使用调色板了

4.4K2 0

和我一起写一个音乐播放器，听一首最伟大的作品

接着，我们创建了一个音频实例 audio，将其设置为导入的 Audio 组件，然后将导入的音乐传递给 Audio 元素暴露出来的 file 参数。...：每当我们单击下一个或上一个时，会将艺术家更改为当前歌曲的艺术家将图像更改为当前歌曲的图像将歌曲名称更改为当前歌曲接下来，让我们来实现上述功能。...接下来，我们创建了一个包含对象的歌曲数组。每个对象都有一个标题、艺术家、导入图像的 img_src 和导入歌曲的 src。...当我们单击下一个按钮时，我们将按照如下公式设置 currentSong 状态的值： currentSong + 1 + songs.length) % songs.length 当我们单击上一个按钮时，...最后，我们处理了更改图像、艺术家和歌曲标题的功能。当我们启动应用程序时，似乎一切正常；单击“下一步”按钮时图像会发生变化。但是问题来了，播放的歌曲与屏幕上显示的图片和艺术家姓名不匹配。

1.9K2 0

webpack资源管理

我们尝试一下，通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js 中： style.css .hello { color: red; } index.js...element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // 将图像添加到我们已经存在的...element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // 将图像添加到我们已经存在的...element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // 将图像添加到我们已经存在的...element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // 将图像添加到我们已经存在的

1.9K2 0

小程序实践：基础内容icon，关于图标的5个实现方案等

由于矢量字体是绘制出来的，所以它可以实时填充任意颜色，可以无极缩放而没有锯齿。回到我们的矢量字体图标方案上来。既然字符可以在字体文件里定义，图标为什么不可以呢？...即使是别人写好了样式，批量引入进来，也有不便控制的问题。它本身并不是字符，如果每个图标在绘制时没有一个统一的中心点，在使用时仅控制位置就比较麻烦。 E）最后，还有一个方案，就是使用svg。...并且它不需要合成字体转换格式，它是一个xml格式的文本文件，还可以在Sketch等矢量软件中直接编辑。查看一下上面这个svg文件的内容： ? 主要内容是那一长串坐标信息。...4）有时间真机上显示icon空白，不正常显示的问题这是在社区上看到的问题，有人说类似下面这样的代码： ? 在直机上测试，icon显示不出来。这一看就是使用了自定义图标。...b）即使是真机，各种手机微信内嵌的浏览器内核也存有差异，不排除是字体文件的兼容性问题。可以将svg以外的字体格式全部删除，尤其是排在前面的。

3K0 0

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

体积微：SVG乃矢量图像格式，以一连串数学函数及坐标点来描绘图像，使得SVG文件体积往往甚于位图更小。...可无穷缩放：由于SVG为矢量图，故可在图像质量不损失的环境下进行无限缩放，此对于开发高DPI（即“屏幕像素密度”）显示装置，例如Retina屏的网页应用，大有裨益。...然而，SVG并非在所有情形下皆为最佳选择。对于一些复杂度较高及色彩丰富的图像，例如照片，使用位图可能更为恰当。因此，在每个具体的项目中，皆需依据实际需求而决定使用何者。具体过程一....在计算属性iconName中，吾等将 iconClass 添以 #icon- 前缀，然后赋值于 SVG 的 use 元素的 xlink:href 属性。...' // 导入 SvgIcon 组件 import SvgIcon from '@/components/SvgIcon' // 将 SvgIcon 组件注册为全局组件 Vue.component('

2.5K1 0

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

2 目标不知道诸位读者们有没有自己找icon的经历：先找到对应图片并下载将文件移动到项目并改名在需要使用的地方导入并通过img标签使用私以为，第一步，第二步，第三步我都不喜欢。...使用SVG Symbol，我们可以将所有的图标放在一个单独的SVG文件中，并通过引用该文件中的Symbol元素来使用它们。...overflow: hidden; } 使用em作为icon的单位，是因为em是相对于当前对象内文本的字体尺寸的宽度单位，这样我们就可以通过设置fontSize的方式来调整icon的图标了。...至此，我们已经完成了将SVG图标转换为SVG Symbol，并自动导入的流程。现在，我们可以直接在代码中使用SVG图标了，而不需要导入文件。 4.2.4 性能考虑值得注意的是，该方法存在一定的问题。...由于我们全量引用了图标，会导致在所有页面，都会导入所有icon，原因是我们在svg-sprite.ts文件中做了自动化导入，我们亦可通过单行导入的方式来避免全量引入，我目前在思考有没有什么更好的方案解决该问题

5.1K1 0

高清ICON SVG解决方案（下） - 腾讯ISUX

下文将讲诉前端侧我们如何用SVG来做成高清ICON，并且良好支持PC下的各个浏览器，并兼容IE6+以上的浏览器。...从上一篇文章中我们得知SVG 做的图标在IE9+的浏览器渲染效果相当的差，所以在IE下我们我们不使用SVG ICON，我们可以将SVG转成一倍的png图片来进行替代。...：第一步将用AI模板做好的图标转换成SVG文件后导入到icomoon中： ?...，它不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器自己去选择加载合适的图片。...版权所有，转载时请注明出处，违者必究，谢谢你的合作。

1.6K1 0

Ant Design 是怎么管 Icon 的？

Ant Design 的 Icon 使用的是 SVG 格式图标； —— 《antd 官网》注：为什么选 SVG 而不是 IconFont https://blog.github.com/2016-02...如何使用 antd 的 Icon？ 3.1. 常规用法直接通过 Icon/> 的 type 和 theme 指定图标。 3.2. 引用 iconfont.cn 中的定制图标 3.3....SVG 基本原理？ SVG （Scalable Vector Graphics）是一种基于 XML 语法的矢量图像格式（怎么放大都不失真的那种...）。.../icons-react：可以将 svg 定义描述转换为 React 组件； ant-design/Icon：负责整合 icons 和 icons-react，将 icons 导出的所有 svg 定义描述导入...用途、目录结构对外提供 Icon 接口；整合 icons 和 icons-react，自动将 icons 中的所有 IconDefinition 注册到 icons-react 中，以便可以通过

5.1K3 0

网页图标（Icon）那些事

（后端程序员伤不起）后面我咨询了DeepSeek: 在网页设计中，图标（icon）是一个小而重要的元素。它不仅帮助用户快速识别网站，还能提升用户体验。...常见使用场景：浏览器标签页：显示在网页标题旁边。书签栏：用户收藏网页时显示。主屏幕图标：移动设备将网页添加到主屏幕时显示。 PWA（渐进式网页应用）：作为应用图标使用。...在书签栏显示图标。甚至在安卓手机上，使用chrome浏览器的将网页添加到主屏幕功能。可以显示icon图标。如何设置设置icon 最简单的方式是在网页的中添加一行。...SVG：矢量格式，无限缩放不失真，适合响应式设计。...允许在一个文件中存储多个位图（BMP 或 PNG 格式）。每个位图可以具有不同的尺寸。 ICO 文件包含：文件头（Header）：定义 ICO 文件类型及包含的图像数量。

1.1K1 0

web图像的常见应用策略与技巧

浏览器果然上当了，他把360的图当成1200的来用了。这里可能有些疑问，图像的宽度为什么不是90vw了哪？因为浏览器被骗了但是自己却不知道，他依然按照1200的图像，去适配dpr。...这种方式很智能，浏览器去根据你的sizes，从w列表里选择最适合的图像来调用显示。正因为他太智能了，在实际操作中可控性较差，有些我们想精确控制的图像显示，有时候并不能如意。...source为浏览器提供了要显示图像的供选版本。适用场景为：在一个精确特定的转效点（breakpoint）需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。...当viewport大于960像素时，会加载图像960的图像。...当viewport宽度大于768像素时，浏览器会加载768的。而当宽度小于768像素时，加载默认图像360。

2.1K1 0

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标

引入element-plus element-plus官方介绍了几种使用方式，分别是完整导入、按需导入和手动导入，这里我们使用官方比较推荐的方式——按需导入，按需导入就是不用全局注册，也不需要在使用的页面...vue3的组合式API（也是本文采用的方式）中无论是ref还是生命周期函数之类的，都需要在使用时进行手动引入，这里我们把vue的组件也还有vue-router自动引入了，后期用的时候就无需再手动引入了。...element-plus的图标啦，注意的是，我们使用的名字需要时这样的格式i-ep-name，例如 // 官方文档点击复制代码 icon>icon> // 需要修改为...icon一文中知道了 svg-sprite 这个玩意儿，这个原文中有介绍，这里就不重复赘述了，不过原文介绍的是 webpack 使用的的方式，这里介绍一下vite使用的方式。...首先我们创建文件夹assets/icons/svg，用来存放我们下载的svg 之后再创建一个assets/icons/.ts，用来返回所有图标的名字，我们在菜单管理里选择图标时需要用到。

3.4K2 0

web图像的常见应用策略与技巧

w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。...这种方式很智能，浏览器去根据你的sizes，从w列表里选择最适合的图像来调用显示。正因为他太智能了，在实际操作中可控性较差，有些我们想精确控制的图像显示，有时候并不能如意。...source为浏览器提供了要显示图像的供选版本。适用场景为：在一个精确特定的转效点（breakpoint）需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。...当viewport大于960像素时，会加载图像960的图像。...当viewport宽度大于768像素时，浏览器会加载768的。而当宽度小于768像素时，加载默认图像360。

2.4K9 0

使用这些 CSS 属性选择器来提高前端开发效率！

.joke:hover:after { content: "Answer:" attr(title); display: block; } 上面的代码在鼠标悬停时将显示一串自定义的字符串...a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg...hotpink; } 打印链接在打印样式中显示URL使我走上了理解属性选择器的道路。...你可以将其添加为第二个选项，但要确保它不是惟一的选项。...将这些内容放在我们的生产网站上会使用户产生错误。没有 controls 属性的 audio 我不经常使用audio标签，但是当我使用它时，我经常忘记包含controls属性。

3.2K5 0

分享5个关于 Vue 的小知识，希望对你有所帮助（四）

例如，当我们发出某些事件时，可能希望传递一些值。我们可以在发出事件参数后，将值作为第二个参数传递进去。...其中一种方法是将SVG文件封装在Vue.js模板组件中，然后将其作为组件导入和使用。另一个选择是使用默认的标签来渲染SVG文件。...采用这种方法，您只需将SVG文件的路径作为 src 属性提供，文件将显示为图像。 SVG作为模板文件在这个表单中，我们可以将SVG文件直接包含在 template 标签中，并按原样渲染。...另外，我们将 @change 的值设置为 previewFiles 方法。 4、如何从数据对象中删除属性？有时候，我们想要使用Vue.js从数据对象中删除一个属性。...在本文中，我们将介绍如何使用Vue.js从数据对象中删除属性。要从Vue.js的数据对象中删除属性，我们可以使用 this.$delete 方法。

1.4K1 0

每个前端工程师都应该了解的图片知识(长文建议收藏)

构成点阵图的最小单位是像素，位图就是由像素阵列的排列来实现其显示效果的，每个像素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个像素，我们可以改变图像的色相、饱和度、透明度，从而改变图像的显示效果...无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。常见的就是 svg 格式的。根据压缩分类无压缩。无损压缩。...打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。...当我们遇到适合 PNG 的场景时，也会优先选择更为小巧的 PNG-8。...这意味着 SVG 图片在放大时，不会失真，所以它非常适合用来绘制企业 Logo、Icon 等。优点： SVG 可被非常多的工具读取和修改（比如记事本）。

1.5K2 1

点击加载更多

Svg矢量图封装使用

React 造轮子系列：Icon 组件思路

React 造轮子系列：Icon 组件思路

分享 63 个面向前端开发人员的开源项目工具

iconfont矢量图标旋转晃动

高效地将 TailwindCSS 与 Nuxt 结合使用

和我一起写一个音乐播放器，听一首最伟大的作品

webpack资源管理

小程序实践：基础内容icon，关于图标的5个实现方案等

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

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

高清ICON SVG解决方案（下） - 腾讯ISUX

Ant Design 是怎么管 Icon 的？

网页图标（Icon）那些事

web图像的常见应用策略与技巧

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标

web图像的常见应用策略与技巧

使用这些 CSS 属性选择器来提高前端开发效率！

分享5个关于 Vue 的小知识，希望对你有所帮助（四）

每个前端工程师都应该了解的图片知识(长文建议收藏)

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐