【vue】webpack插件svg-sprite-loader---實現本身的icon組件

引言:最近開始寫vue的項目,借鑑了一下vue-element-admin源碼,針對vue有一個關於icon圖標的處理,最近也找了不少關於vue的icon處理的解決方案,大部分都是按照以前小程序的方式直接引入iconfont項目,而後在外面封裝調用樣式就能夠了。css

  • 按照平時導入icon的方法的話有一些已知的缺點
  1. 操做繁瑣,每次ui須要加一些新的圖標的時候,都要從新下載圖標庫的項目,而後把總體的文件(其中包括css,svg,ttf,woff等)替換掉。
  2. 若是更更名稱的話,須要在圖標庫裏改一次,而後進行下載複製拷貝。
  3. iconfont網站庫圖標內容有限,特殊業務條件須要uimm們本身設計的圖(PSD小圖標變身SVG Sprites/font-face歷險記)
  • 文檔中推薦的方式是引入svghtml

    使用svg的優勢


  1. 圖標易於實時修改
  2. 圖標能夠帶動畫
  3. 可使用標磚的prop和默認值來將圖標保持在一個典型的尺寸並隨時按需改變他們
  4. 圖標是內聯的,因此不須要額外的HTTP請求
  5. 能夠動態地使得圖標可訪問vue

     注:文檔中關於svg的介紹webpack

  • 這裏準備採用文檔中推薦的插件svg-sprite-loader進行介紹css3

    注: 用來根據導入的svg文件自動生成symbol標籤並插入html,接下來就能夠在模板忠方便地使用svg-sprite技術了web

    使用svg-sprite的好處


  1. 頁面代碼清爽
  2. 可以使用ID隨處重複調用
  3. 每一個SVG圖標均可以更改大小顏色npm

    注:張鑫旭大神的介紹-SVG Sprite技術介紹element-ui

    安裝插件

npm install svg-sprite-loader --save

webpack配置

在webpack.base.conf.js加入處理svg的loader小程序

{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
 }

這個配置默認導入src文件下的icons文件
src/icons/index
segmentfault

// requires and returns all modules that match

const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);

而後運行

npm run dev

報錯了,此時咱們看咱們的webpack配置

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: path.resolve(__dirname, '../src/assets/icons')
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

下面url-loader中也處理了svg文件,刪掉svg處理以後就顯示咱們須要的svg了,可是以前的url是咱們element-ui裏生成的,須要加上symbol,不去處理src/assets/svgs路徑下的svg文件

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: path.resolve(__dirname, '../src/assets/icons')
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
     exclude: [
        path.resolve(__dirname, '../src/assets/icons'),
    ],
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

注:require.context,webpack管理依賴

使用方法

<svg>
      <use xlink:href="#jisuan" />
    </svg>
import '@/assets/icons/jisuan.svg'

組件化


固然,這並非最後想要的結果,咱們須要將每一個svg文件整合起來組件化,這樣方便之後的調用

創建一個Icon.vue文件

<template>
    <svg>
        <use :xlink:href="`#${name}`"></use>
    </svg>
</template>

<script>
  export default {
    name: 'icon',
    props: {
      name: {
        type: String,
        required: true,
      },
    },
  }
</script>
<icon name="jisuan" />
  import '@/assets/icons/jisuan.svg'

自動導入


這裏插入每一個svg圖標都須要import,在咱們平時寫項目的時候js,vue文件都已經實現了自動導入,這裏照葫蘆畫瓢,讓src/assets/svg裏的文件自動導入

assets/icon/scan.js

const requireAll = requireContext => requireContext.keys().map(requireContext);

// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);

main.js

import './assets/scan.js'

參考文檔:

相關文章
相關標籤/搜索