时间：2023-10-05 00:24:01 | 来源：网站运营
时间：2023-10-05 00:24:01 来源：网站运营
网站图标开发指南：
在线咨询
<html> <body> 图标 <img src="xxx.png" /> </body></html>在我刚开始写页面的时候就是这样做的，感觉 so easy，直到业务变得越来越复杂，我就不得不思考以下几个问题：<html> <head> <style> /* 使用媒体查询，为每个端适配不同尺寸的图片 */ .@media screen and (max-width: 300px) { .img { background-image: url("1x.png"); } } .@media screen and (max-width: 600px) { .img { background-image: url("2x.png"); } } </style> </head> <body> <!-- srcset 可以让不同的客户端自动匹配合适尺寸的图片--> <!-- 如：当设备像素比为 2 时，浏览器会自动选择 2x 图进行渲染--> <img src="1x.png" srcset="1x.png 1x, 2x.png 2x" /> </body></html>通过上面的方法，多客户端适配问题解决了，但我们使用了多张内容相同、尺寸不同的图标，这无疑增加了图片的数量。.icon1,.icon2,.icon3{ width: 54px; height: 54px; background: url("../大图.png");}/* 定位背景图，让图片显示到对应的位置 */.icon1 { background-position: -168px 0px;}.icon2 { background-position: -56px 0px;}.icon3 { background-position: 0px 0px;}可以看到，使用雪碧图布局时，所有的图片都使用了同一张大图，然后使用背景图去定位，以区分不同的小图标。<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MY"/>可以看到，图片的 src 并不是一个地址，而是一个字符串，这样甚至可以不发起 HTTP 请求，就能渲染图片。 Base64 的原理是 Data URLs，即：前缀为 data: 协议的 URL，允许开发者向 HTML 中嵌入小文件。总结一下 Base64 图的特点：img { // 让图片变灰 filter: grayscale(100%); // 让图片变模糊 filter: blur(5px); // ...}但是 CSS Filter 能修改的颜色是有限的，如果想任意修改图标颜色，我们继续往下看。<html> <head> <style> /* 首先引入字体文件 */ @font-face { font-family: "iconfont"; src: url("iconfont.eot"), url("iconfont.woff") format("woff"), url("iconfont.ttf") format("truetype"), url("iconfont.svg#iconfont") format("svg"); } /* 定义字体类 */ .iconfont { font-family: "iconfont"; font-size: 16px; } /* 在伪类中编写 unicode 字符 */ .icon-edit:before { content: "/e603"; } </style> </head> <body> <!-- 使用 &# + unicode 编码可以渲染对应的字符。 --> 直接使用字符编码： <i class="iconfont"></i> 使用类名渲染（将字符写在了伪类中）：<i class="iconfont icon-edit" style="color:red" ></i> </body></html>可以看到，有了字体图标后，我们可以像处理文字一样去修改图标的颜色。@font-face url 找到对应的字体文件（eot ttf woff 等），接下来在该字体文件中找到这个 unicode 编码对应的绘制外形，最后绘制在页面上。我们看到的内容 = fontFamily(unicode);00100000，大写的字母 A 在二进制中就是 01000001 。 unicode 最多 4 个字节，一个字节 8 个比特位（表示二进制中的 0 或 1），也就是 2**32 个状态，完全可以容纳世界上所有的符号。所以，任何一个符号，都可以在 unicode 编码中被找到。<html> <head> <style> .my-style { /* 控制填充色 */ fill: red; } .my-style use { color: orange; } </style> </head> <body> <svg style="display: none;"> <symbol viewBox="0 0 24 24" id="heart"> <path d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z" ></path> </symbol> </svg> <svg class="my-style"> <use xlink:href="#heart" /> </svg> </body></html>可以看到，首先我们把需要使用的图标封装到 symbol 标签中，在使用时只需要 use 一下就可以了。这跟我们定义一个 CSS class 然后再去 HTML 中引用是一个道理。<html> <head> <style> /* svg 中的元素存在于 shadom 中，可以通过自定义变量传递参数 */ .icon { width: 100px; height: 100px; margin-right: 10px; } .icon--fill { fill: grey; } .icon--color { fill: #ef5b49; --handle-color: #c13127; --cup-color: #ef5b49; --smoke-color: #cacaea; } .icon--color-alt { fill: #2f3fff; --handle-color: #1f2bac; --cup-color: #2f3fff; --smoke-color: #a5acbd; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" class="hidden"> <symbol id="icon-coffee" viewBox="0 0 20 20"> <title>icon-coffee</title> <!-- 使用自定义变量 --> <path fill="var(--handle-color)" d="M15,17H14V9h3a3,3,0,0,1,3,3h0A5,5,0,0,1,15,17Zm1-6v3.83A3,3,0,0,0,18,12a1,1,0,0,0-1-1Z" /> <rect fill="var(--cup-color)" x="1" y="7" width="15" height="12" rx="3" ry="3" /> <path fill="var(--smoke-color)" d="M7.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,0,1-1.79.89Z" /> <path fill="var(--smoke-color)" d="M3.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z" /> <path fill="var(--smoke-color)" d="M11.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z" /> </symbol> </svg> 使用 <svg class="icon icon--color" aria-hidden="true"> <use xlink:href="#icon-coffee" href="#icon-coffee" /> </svg> </body></html>可以看到，SVG 和 HTML 一样具有树形结构，结构中的 path 都是图形中的一个区域，这些区域可以被 CSS 选择器匹配到。当我们匹配到对应的区域时，就能进行对应的颜色修改了，一张多色的 SVG 图也就做好了。案例关键词：发指
