为什么要使用 SVG 图标？ 在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多。...,属性值务必 #icon-图标名字 use标签fill 属性性可以设置图标的颜色（如何设置失败，检查你复制的这个 svg 图标代码中是否有这个 fill 属性，如果有就将其移除掉，就可以使用了） 如果需要调整图标的大小...，那么就需要在 svg 标签上添加 style 就可以了 我是App根组件 可以看到，在项目中可以使用 SVG 图标了，但是有一点不好的就是这样用起来有点麻烦，这个时候我们就可以进行ICON...component / SvgIcon / index.vue 这里是组件的一个简单封装： <use :xlink
最近看项目视频的时候对里面使用 svg 的方式感到很好奇，于是去网上查了一下，发现 svg 竟然也有类似于 css 雪碧图一样的用法，也就是 svg-sprite（孤陋寡闻了），而且配合插件后能够以组件化的方式使用... css 雪碧图中是把多个背景图片放在一张大的图片中，而 svg 雪碧图则是把多个 symbol 放在一个大的 svg 中，每个 symbol 代表了一个图标，以后每次想要使用图标...，只需要写这么一段代码即可： 但是这里有两个问题： 从图标库（比如阿里的 iconfont）下载下来的通常是....svg 文件，如何根据多个单独的 .svg 文件生成 svg 雪碧图？...iconName 和 iconColor 确定图标的类型和颜色。
可无穷缩放：由于SVG为矢量图，故可在图像质量不损失的环境下进行无限缩放，此对于开发高DPI（即“屏幕像素密度”）显示装置，例如Retina屏的网页应用，大有裨益。...然而，SVG并非在所有情形下皆为最佳选择。对于一些复杂度较高及色彩丰富的图像，例如照片，使用位图可能更为恰当。因此，在每个具体的项目中，皆需依据实际需求而决定使用何者。 具体过程 一....其成立之目的，正是为了使吾等在项目中使用 SVG 图标时能变得更为便捷。 name: 'SvgIcon' 此组件接受两属性，名若iconClass及className。...className 属性 用以定制 SVG 图标之样式；className 之值，将被加至图标的 CSS 类名中，使得吾等可于外部定义及施用 CSS 样式也。.../svg' 目录下的以 '.svg' 结尾的文件 const req = require.context('.
element-plus的图标啦，注意的是，我们使用的名字需要时这样的格式i-ep-name，例如 // 官方文档点击复制代码 // 需要修改为...这个项目因为考虑过要开源，所以图标的可扩展性一定要搞好，于是就想到了使用svg图标，但是一个个引入又比较麻烦，就想看看有没有什么更好的解决方法，于是乎想起了花裤衩大佬的手摸手系列，在手摸手，带你优雅的使用...首先我们创建文件夹assets/icons/svg，用来存放我们下载的svg 之后再创建一个assets/icons/.ts，用来返回所有图标的名字，我们在菜单管理里选择图标时需要用到。...，因为我从iconfont下载的svg图标就算不选择颜色，也会自带默认颜色，而有默认颜色的svg图标无法设置颜色。...', SvgIcon) 之后我们就可以在页面中进行使用了 .menu-icon { font-size
SVG 在既能满足现有图片的功能的前提下，又是矢量图，在可访问性上面也非常不错，并且有利于 SEO 和无障碍，在性能和维护性方面也比 icon font 要出色许多。...和 svg-sprite-loader，这两个工具包都是给 webpack 打包 svg 图标资源使用。...from 'vue' import SvgIcon from '@/components/SvgIcon' // svg组件 // register globally Vue.component('...创建一个通用的引入图标的 SvgIcon 组件如下： ...="github" /> 参考文章： 在 vue 项目中优雅的使用 Svg
设计师主要是利用AI，和Sketch进行SVGicon，SVG拓扑图的绘制。 但是，单纯依靠软件一键导出的SVG图形，会因为每位设计师的绘制导出方法不同，在实际使用中出现或多或少的应用问题。...它们的差别在于CSS编写的位置。在单个SVG的时候，2种方式都是健康的，可是如果业务中使用了SVG雪碧图，那图1就存在大大的隐患。...[图片] [图片] 很多设计师常迷茫的问题：“ 为什么我导出的SVG图片好好的，但是被UI开发同学引用的时候，就出错了呢？”...F.缩小和响应 缩小：压缩SVG代码，删除不必要的空格，来减小SVG图片体积。因为我们的Maxim工具上传时自动会做一次这样的压缩，所以在日常导出时不需要依靠AI的简易压缩了。...来自 不留名同学 的实践经验补充： “在新版的AI 2018输出svg图标的时候，新增了通过另存为就可以导出SVG的方式，SVG的设置不会自动保存上次勾选的设置，每次都会回退成系统默认设置。”
img图标的资源请求，这是它最大的缺点 雪碧图(css sprites) 后来我们为了优化资源请求开始使用CSS雪碧图(css sprites) CSS Sprites在国内很多人叫css精灵/css雪碧图...，主要是解决unicode书写不直观，语意不明确的问题。...，symbol这中使用方式就是本文的正题了，其实之前我是一直都使用font-class这种方式的(大家估计用这个的也很多)，但是它有点麻烦，因为我每次迭代项目时，修改或者添加图标都要去重新下载一份新的包...现在我们就可以在你想使用图标的位置使用了，使用方式如下 在main.js中引入(全局引入)要使用的图标文件 import "@/icons/svg/qq.svg"; 模版中使用 <use...最后就是我们的使用了，在main.js文件引入icons/index.js import "@/icons/index.js"; 再来看看我们使用图标的方法，组件中： <svg-icon
2 目标 不知道诸位读者们有没有自己找icon的经历： 先找到对应图片并下载 将文件移动到项目并改名 在需要使用的地方导入并通过img标签使用 私以为，第一步，第二步，第三步我都不喜欢。...有没有一种合适的方式，让我可以直接通过IDE新建文件，不再需要下载，同时使用的时候不再需要导入？ 这或许是有的，本文旨在完成该目标。...); }; 在上面的代码中，我们使用了SvgIcon组件来渲染SVG图标，其中，name属性用于指定需要渲染的图标的名称。...至此，我们已经完成了将SVG图标转换为SVG Symbol，并自动导入的流程。现在，我们可以直接在代码中使用SVG图标了，而不需要导入文件。 4.2.4 性能考虑 值得注意的是，该方法存在一定的问题。...由于我们全量引用了图标，会导致在所有页面，都会导入所有icon，原因是我们在svg-sprite.ts文件中做了自动化导入，我们亦可通过单行导入的方式来避免全量引入，我目前在思考有没有什么更好的方案解决该问题
前言 在 Web 开发中，我们经常会用到 icon，icon 的使用经历了从图片到字体，再到 svg 的演变过程，也产生出相应的 icon 库，如雪碧图、Font Awesome、Iconfont 等等...随着前端的发展，icon 使用方案落在了 svg 上，svg 有着矢量图的优势，可以无限放大而不失真，而且 svg 本身就是一种 XML 文件，可以直接在 HTML 中使用，也可以通过 CSS 进行样式控制...，但是在 Vue 项目中使用 svg 时，我们会遇到一些问题，本文将介绍如何在 Vue 项目中更优雅的使用 svg icon。...大小 图标可从 iconfont 项目中下载或者由 UI 切图，同一个项目中使用的 Svg Icon 图标建议统一大小规格，比如 128*128。...参考资料 手摸手，带你优雅的使用 icon 未来必热：SVG Sprites 技术介绍 SVG 精简压缩工具 svgo 简介和初体验 svg-sprite-loader svgo svgo-loader
/views/Login.vue'), },];const router = new VueRouter({ routes,});同时我们需要对路由做一定的控制，比如未登录时只允许访问登录页，以及对页面跳转做一些样式上的优化...，当角色为 admin 时，第一行不显示学生可以看到： 我是{{ role }}大家可以看到： 我是全局注册该组件Vue.component('SvgIcon', SvgIcon);这样我们就可以通过 SvgIcon 访问内存中存在的...svg 图标了，我们还需要做的就是将 svg 文件加载到内存中， svg-sprite-loader 的官方解释是：一个用于创建 svg 雪碧图的 Webpack 加载器。...通俗的讲：svg-sprite-loader 会把你引入的 svg 塞到一个个 symbol 中，合成一个大的 svg，最后将这个大的 svg 放入 body 中。
本文我将与你就这两方面的问题展开探讨，结合 Vite 自身的能力及其生态，来解决项目中静态资源处理的各个疑难点，同时也能继续完善目前的 Vite 脚手架工程。...图片加载图片是项目中最常用的静态资源之一，本身包括了非常多的格式，诸如 png、jpeg、webp、avif、gif，当然，也包括经常用作图标的 svg 格式。...HTTP2 的多路复用设计可以解决大量 HTTP 的请求导致的网络加载性能问题，因此雪碧图技术在 HTTP2 并没有明显的优化效果，这个技术更适合在传统的 HTTP 1.1 场景下使用(比如本地的 Dev...这种合并图标的方案也叫雪碧图，我们可以通过vite-plugin-svg-icons来实现这个方案，首先安装一下这个插件:pnpm i vite-plugin-svg-icons -D接着在 Vite...，发现雪碧图已经生成雪碧图包含了所有图标的具体内容，而对于页面每个具体的图标，则通过 use 属性来引用雪碧图的对应内容如此一来，我们就能将所有的 svg 内容都内联到 HTML 中，省去了大量 svg
正文开始... css加载图标 这是我们项目中最常用的一种方式 我在自己的iconfont[1]仓库中添加了几个图标 打开前阵子我开源的一个移动端项目topfreeApplication[2] 我们在.../pages/home/component/Search.vue组件中也看到我使用一个svg-icon的二次组件加载图标的 我把svg-icon注册成一个全局组件 <!...class，但同时也多了一个自定义属性unicode="",这是一个很有用的属性，通常我们需要动态的更换图标时，我们就可以把这个unicode写在标签上，那怎么才能显示呢？...css中的attr函数成功解决了图标加载问题 我们看看attr这个属性可以在我们项目中怎么用,在哪些场景可以用？...因此我们就用css中attr结合js实现了一个计数器功能，关于cssattr还有更多待挖掘的功能，在动态改变图标等，attr是一种不错的选择方案 总结 加载阿里矢量图标除了使用class与svg,我们也可以使用
config.resolve.alias.comps=resolve('src/components') }, } // 牛人总是姿势多，chainWebpack，链式配置，近来使用最多的...，可能看着高大尚一些， // 链式配置 看着牛逼一些，类似jquey链式调用 chainWebpack(config){ // 使用 svg icon ,配置 svg-sprite-loader...//看看效果 按照配置创建文件，src根目录创建icons/svg/文件夹，里面存储svg后缀的文件 image.png 阿里矢量图库随便下载一个小图 <svg t="1605408690360"...Vue from 'vue' import SvgIcon from '@/components/SvgIcon.vue' // 自动加载svg目录中的svg文件 // context()返回的函数是指定上下文路径的...',SvgIcon) main.js中，引入上面创建的js文件，让他在打包时执行 import Vue from 'vue' import App from '.
原理 svg-sprite-loader 可以多个svg图标合并. 使用时只需根据合并的symbol的id即可....使用 安装 svg-sprite-loader npm install svg-sprite-loader -D webpack链时配置 config.module .rule...-- 接受外链形式的图片 --> <!...computed: { isExternal() { return isExternal(this.iconClass); }, iconName() { //使用尽可能的方便...from 'comps/SvgIcon' //全局注册 Vue.component('svg-icon', SvgIcon) // 加载所有图片 const req = require.context
之前使用svg的方式 const svgSrc from "@/assets/svg/xx.svg"; const SvgIcon = () => { return <svg {...attribute...之后使用svg的方式 不知道，大家之前用过Image Sprites[1]，也就是我们常说的「雪碧图」。...SVG 是矢量图的一种 我们从维基百科中寻找关于矢量图[2]的信息。 从上面的信息，我们可以得知。矢量图是使用「数学公式」生成的，这些公式转化为在网格上对齐的点、线和曲线。...基于这些特性，我们如果考虑网络性能时并且图像的还原度不是很高的话，我们一般首选SVG(可缩放的矢量图)。 矢量图形常见于 SVG、WMF、EPS、PDF、CDR 或 AI 类型的图形文件格式。...为什么使用SVG文件 尽管SVG不太灵活。但是，SVG是一系列其他情况的绝佳选择： Logo设计。由于我们可能会在pc端和移动端重复使用Logo，使用SVG解决了潜在的可伸缩性问题。 插图。
iconfont就是图标字体，我们可以像使用普通字体一样使用它，只要适合字体相关的CSS属性都适合字体图标，使用font-size和color就可以轻松控制图标的大小和颜色。...优势： 能够容易地改变图标的颜色，尺寸 矢量图不失真 兼容所有流行的浏览器，在h5和app上都能使用 替换图标和新增图标也非常简单，也不需要考虑图标合并的问题 劣势： 只支持单色图标 字体渲染，低倍屏下容易出现锯齿...svg其实很早就出现了，只不过由于兼容性的问题，早前并没有很好地发挥出它的价值，但随着IE6/7/8退出舞台， android 4.x 的开始，很多网站都开始使用svg作为图标方案 。...优势： 能够容易地改变图标的颜色，尺寸 支持彩色图标 矢量图不失真 可读性好，有利于SEO与无障碍 渲染效果好，不会有锯齿 劣势： 体积相对于iconfont较大 引入方式 使用img、object、embed...标签或者作为background背景图直接引用svg，或者可以合并成雪碧图，这种方式与png雪碧图使用方法一样。
几年前写过一篇文章叫 Vue 项目中优雅的使用 icon ，主要介绍了当时项目中主流的几种图标使用方式，比如 Img 图标、CSS 雪碧图、字体图标（Icon Font）、SVG 图标（SVG Icon...SVG Icon ，然后再写一个 Vue 组件 统一的去加载它，在每次需要使用图标时就去下载一个 SVG 图标到 Icon 模块中，使用组件并传入...没有办法，该升级还得升级，那就改吧，改完了之后问题就出现了，如果我们还使用之前的 去加载自定义的图标，那就出现了一种尴尬的情况，同是 SVG 图标，同一个项目，两种使用方式。。。...那我们就再简单的对比一下几种 Icon 使用方式，当然，Img 和 CSS 雪碧图就不说了，因为现在最常用的都是矢量图标，所以我们简单对比下当下最常用的字体图标和 SVG 图标的优缺。...src/assets/svg/home/jihua.svg src/assets/svg/about/kefu.svg 上面是我建的两个图标，接下来我们来配置自定义图标的加载。
> ); } 结合上面提到的主题方案，就可以控制 svg 的主题颜色。...="blue red" /> // 效果一定是 red，因为 css-in-js 在最终编排 class 时，虽然两种样式都存在，但书写顺序导致最后一个优先级最高， // 合并的时候就会舍弃失效的那个...这也从某种意义上说明了 iconFont 注定被淘汰，因为字体文件目前无法按需加载，只有全部使用 SVG 图标的项目才能使用这种优化。...会有专人 Review 该 Pull Request，当两人以上通过该 Pull Request 时，你的翻译将被合并到仓库中。 删除你所创建的分支（如继续参与，参考同步流程）。...相比其他前端大会非常多的干货来说，React Conf 虽然显得主题比较杂，但这正是人文情怀的体现，我相信只有带着更高的使命愿景，真诚帮助他人的技术团队才可以走得更远。
html> 在我刚开始写页面的时候就是这样做的，感觉 so easy，直到业务变得越来越复杂，我就不得不思考以下几个问题： 图标需要适配多个客户端 图标太多需要优化 图标需要动态修改颜色 对于适配多个客户端的问题...: -56px 0px; } .icon3 { background-position: 0px 0px; } 可以看到，使用雪碧图布局时，所有的图片都使用了同一张大图，然后使用背景图去定位，以区分不同的小图标...总结一下字体图标的特点： 字体图标是矢量图，即使放大也不会变模糊。 字体图标可以通过 CSS 样式进行控制，使用更加灵活。 字体文件一般比较大，但可以将不用的字体删掉。...当我们匹配到对应的区域时，就能进行对应的颜色修改了，一张多色的 SVG 图也就做好了。 ?...总结一下 SVG 图标的特点： 支持动态修改多个区域的颜色 支持渐变色 矢量图，放大也不会变模糊 思考与总结 本文介绍了 3 种小图标的使用方式，这里做一个简单回顾。
，一个cmd的坐标是相对于上一个坐标的，而不是绝对定位。...侧边渐变效果 上述两种方案的效果图，可以看出侧边地图的侧面都有渐变效果，这种是通过定制threejs的材质的shader来实现的。...，然后通过z坐标的高度进行颜色的渐变差值运算。...三维地图icon标注定位 图片上的图标定位数据是经纬度，所以需要把定位度转换为三维中的坐标。此处使用的是双线性差值。...涉及到的技术点并不少，包括主要如下技术点： echart使用 json解析生成地图projection投影 svg 解析生成三维地图模型 动态材质修改 贴图的offset和repeat算法等 经纬度定位
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
