webpack使用svg-sprite-loader詳解

總結下svg-sprite-loader的使用以及配置過程中遇到的不懂的地方

　　

建立icons檔案夾放入svg圖檔

> index.js

1

const req = require.context(’./svg’,false, /.svg$/)

第一個參數表示相對的檔案目錄，第二個參數表示是否包括子目錄中的檔案，第三個參數表示引入的檔案比對的正規表達式

const requireall = requirecontext => requirecontext.keys().map(requirecontext)

這個是webpack提供的require方法， 可以建立上下文環境， 相當于将svg目錄下的svg檔案require進來

最後把這個js 導入到工程的入口檔案main.js中

下載下傳安裝插件

cnpm install --save svg-sprite-loader

修改配置webpack中webpack.base.conf.js

<svg-icon icon-class="documentation" class="test"/>

使用svg的好處

頁面代碼清爽

可使用id随處重複調用

每個svg圖示都可以更改大小顔色