世界观点：记录--为什么推荐用svg而不用icon?

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

世界观点：记录--为什么推荐用svg而不用icon?

2023-06-13 17:04:12 来源：博客园

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

使用背景：

(资料图)

1.因为svg图标在任何设备下都可以高清显示，不会模糊。而icon会在显卡比较低的电脑上有显示模糊的情况
2.svg图标在页面render时速度会比icon稍微快一点 3.实现小程序换肤功能；方案见：www.yuque.com/lufeilizhix…

// svg在html里的使用示例01

SVG基础可参考：www.yuque.com/lufeilizhix…

Svg-inline的使用

//示例02import iconShop from "../assets/menuIcon/shop.svg?inline"import iconCustomer from "../assets/menuIcon/customer.svg?inline"import iconCustomerService from "../assets/menuIcon/customerService.svg?inline"import iconNuCoin from "../assets/menuIcon/nuCoin.svg?inline"import iconBanner from "../assets/menuIcon/banner.svg?inline"import iconAccount from "../assets/menuIcon/account.svg?inline"import iconDataReport from "../assets/menuIcon/dataReport.svg?inline"import iconVera from "../assets/menuIcon/banner_01.svg?inline"

inline svg是目前前端图标解决方案的最优解（当然不仅限于图标），而且使用方式也及其简单，只要将svg图标代码当成普通的html元素来使用即可，如：

注意： 新版chrome不支持 # , 需要改成%23 ；stroke="%23000"

作为图片或背景使用时

icon: https://www.baidu.com+ "/icons/icon_01.svg" **特别注意 需要把img标签换成image标签**

将上面的代码插入html文档即可以很简单地绘制出一些图标。正常情况下会将svg保存在本地，具体的页面中导入，参考示例02 作为组件使用；目的是可复用一般来说，使用inline svg作为图标使用时，想要保留svg的纵横比，可以只指定width属性，但是一般为了清晰都同时指定height属性。但如果是像上面绘制边框这种不需要保留纵横比的情形，可将preserveAspectRatio设置为none。

优势与使用方式

从示例01可以看到，将svg直接作为普通html元素插入文档中，其本质和渲染出一个div、span等元素无异，天生具有渲染快、不会造成额外的http请求等优势，除此之外还有以下优势之处：

样式控制更加方便; inline svg顶层的元素会设置以下几个属性：

height=“1em” width=“1em” 可以方便地通过设置父元素的font-size属性控制尺寸

fill=“currentColor” 可以方便地根据父元素或自身的color属性控制颜色

但是我们也可以为其内部的子元素单独设置样式参考

注意事项

如需对svg中各部分分别应用样式，则在设计svg时最好不要将各部分都编于一组，可以将应用相同样式的部分进行分别编组，其他不需要设置样式的部分编为一组，这样我们在应用样式时，只需为对应的标签设置class属性即可。

一般在拿到svg文件后，推荐使用svgo优化svg代码，节省体积，但是如果我们需要针对性设置样式时则需要谨慎使用，因为优化代码会进行路径合并等操作，可能我们想要设置的子元素已经不是独立的了。

inline svg的复用及组件化

同一个inline svg必须能够进行复用，将需要复用inline svg封装成组件

// 使用inline svg组件import AnySvgIcon from "./inline-svg-component"

本文转载于:

https://juejin.cn/post/7243680440690638904

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

关键词：