SVG圖標，SVG symbols

項目中圖標的使用，趨勢是使用svg作圖標的，優(yōu)點如下

1. 兼容現(xiàn)有圖片能力前提還支持矢量

2. 可讀性好，有利于SEO與無障礙

3. 在性能和維護性方面也比iconfont要強很多

怎么在項目中優(yōu)雅的使用svg圖標，下面我們將采用類似雪碧圖的做法

1、普通的使用

普通的使用遇到以下的問題：

• 下載的 svg 可能有自帶的 fill 屬性，添加 color 樣式不生效。
• 封裝 Icon 組件時，每用到一個 svg 圖標都需要引入一下，比較繁瑣。

import apple from "../assets/icons/apple.svg"  // 得到一個計算之后的路徑

const Icon = (props) => {
    return (
        <img src={apple} />
    );
};

export default Icon;

2、全局配置（svg-sprite-loader）

svg-sprite-loader官網(wǎng)
官方解釋是：一個用于創(chuàng)建 svg 雪碧圖的 Webpack 加載器。通俗的講：svg-sprite-loader 會把你引入的 svg 塞到一個個 symbol 中，合成一個大的 svg，最后將這個大的 svg 放入 body 中。

symbol 的 id 如果不特別指定，就是你的文件名。在頁面上形成這樣的元素，然后我們使用use標簽使用類名的形式引入。

1. 打開webpack配置

   先看自己項目目錄有沒有config這個文件，如果沒有就需要調出這個文件，運行這個命令： yarn eject
   注意：如果項目沒有提交要先提交再運行這個命令，運行完就出現(xiàn)config文件，打開可以看到有一個webpack.config.js文件，反正就是暴露webpack的配置文件，方便我們去配置對應的loader

2. 安裝并配置

   yarn add --dev svg-sprite-loader yarn add --dev svgo-loader

   安裝這兩個依賴，然后將下面代碼放進config>webpack.config.js文件里面的module>rules>oneOf里面

   {
      test: /\.svg$/,
      use: [
         { loader: 'svg-sprite-loader', options: {} },
         { loader: 'svgo-loader', options: {} },
      ]
   }
   

3、 使用svg組件化Icon

完成上述配置之后，我們就可以通過指定 id 的方式使用 use 的方式使用 svg 了。但是不能使用import方式引入

不適用import的原因：import 的方式引入了 svg ，在頁面上是找不到 icon 的。這是因為 import 引入的 apple 實際上是一個對象，通過 svg use 指定的 #id 的方式最終被 webpack 理解為 apple 對象沒被用到，所以就 Tree Shaking 掉它，因此我們需要用 require 的方式引入（原因：CommonJS 模塊的這種動態(tài)加載的性質意味著無法應用 Tree Shaking，因為在實際運行代碼之前無法確定需要哪些模塊）。

// 下面這種方式有坑，最終會被 Tree Shaking
// import apple from "../assets/icons/apple.svg"  // 得到一個計算之后的路徑
require('../assets/icons/apple.svg')

const Icon = (props) => {
    return (
        <svg fill="red">
            <use xlink:href="#apple"/>
        </svg>
    );
};

export default Icon;

而且經(jīng)過 svg-sprite-loader 加載之后，不僅可以通過指定 id 的方式引入 icon，而且相比圖片引入的方式，最大的優(yōu)點就在于可以通過給 svg 標簽添加 fill 屬性來調整 icon 的顏色。

4、批量引入所有的 svg靜態(tài)文件

項目中我們用到 svg 的地方，都需要手動引入一下然后使用，當 svg 多起來的時候，一遍遍的引入就顯得不太聰明。能不能像 Element UI 那樣，直接指定一個 name 就能使用特定的 svg ？那就需要在 Icon 組件中將所有的 svg 做批量的引入：

// require('../assets/icons/apple.svg')
// require('../assets/icons/banana.svg')
// require('../assets/icons/orange.svg') // 這樣就仿佛一個不太聰明的機器人

//直接引入 src/assets/icons 目錄下的所有 svg
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
    requireContext.keys().forEach(requireContext);
}
try {
    importAll(require.context('../assets/icons', true, /\.svg$/));
} catch (error) {
    console.log(error);
}

const Icon = (props) => {
    return (
        <svg>
          <use xlinkHref={'#' + props.name}></use>
        </svg>
    );
};

export default Icon;

ps：直接從網(wǎng)上拷貝上述代碼會報錯，需要 yarn add @types/webpack-env -D 一下。

5、svgo-loaderg改變 Icon組件的顏色

svg-sprite-loader可以幫助我們通過 svg use + 指定 id 的方式引入 svg，雖然可以通過給 svg 添加內聯(lián) fill 屬性的方式修改 icon 的顏色，但是并不建議這樣做，而是通過 class 樣式的方式指定 icon 的顏色，這就需要用到 svgo-loader 先把 svg 自帶的 fill 屬性給清除掉，為我們后續(xù)指定 icon 的顏色掃清障礙。

    [svgo-loader](https://github.com/svg/svgo "svgo-loader") 是基于 SVG Optimizer 的一個加載器，而 SVG Optimizer 是一個基于node.js 的工具，用于優(yōu)化 SVG 矢量圖形文件，它可以刪除和修改SVG元素，折疊內容，移動屬性等。

// 配置 webpack.config.js
// 配置之前需要安裝該 loader
// npm install --dev svgo-loader
// yarn add --dev svgo-loader

{ loader: 'svg-sprite-loader', options: {} },
{ loader: 'svgo-loader', options: {
    plugins: [{
        name: 'removeAttrs', // 必須指定name！
        params: {attrs: 'fill'}
        }]
    }
}

通過上述配置，引入項目中的 svg 文件會先經(jīng)過 svgo-loader 清楚 fill 屬性，然后再通過 svg-sprite-loader 將你引入的 svg 塞到一個個 symbol 中，合成一個大的 svg，最后將這個大的 svg 放入 body 中。文章來源地址http://www.zghlxwxcb.cn/news/detail-618004.html

到了這里，關于SVG圖標，SVG symbols，SVG use標簽的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！