記錄--為什麼推薦用svg而不用icon?

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

使用背景：

1.因為svg圖標在任何設備下都可以高清顯示，不會模糊。而icon會在顯卡比較低的電腦上有顯示模糊的情況

2.svg圖標在頁面render時 速度會比icon稍微快一點 3.實現小程式換膚功能 ；方案見：www.yuque.com/lufeilizhix…

// svg在html里的使用示例01
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</svg>
</div>

SVG基礎可參考：www.yuque.com/lufeilizhix…

Svg-inline的使用

//示例02

import 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元素來使用即可，如：

<!-- 繪製右箭頭 -->
<svg viewBox="0 0 1024 1024" height="1em" width="1em" fill="currentColor">
  <path d="M665.6 512L419.84 768l-61.44-64 184.32-192L358.4 320l61.44-64 184.32 192 61.44 64z" />
</svg>

<!-- 繪製邊框 -->
<svg viewBox="0 0 20 2" preserveAspectRatio="none" width="100%" height="2px">
  <path d="M0 1L20 1" stroke="#000" stoke-width="2px"></path>
</svg>

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

作為圖片或背景使用時

 icon: https://www.baidu.com+ '/icons/icon_01.svg' 
<image  class="headIcon" src="data:image/svg+xml,{{icon}}"></image>
**特別註意 需要把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'
<AnySvgIcon width="16px" height="16px" />

本文轉載於:

https://juejin.cn/post/7243680440690638904

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。