目錄
- iconfont的三種使用方式及其優(yōu)缺點
- 封裝svg組件
- svg雪碧圖
- 自動導入svg圖標
封裝svg組件
代碼都是基于 vue 的實例(ps: react 也很簡單，原理都是類似的)
//components/Icon-svg
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'icon-svg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
<style>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
使用svg組件
//引入svg組件
import IconSvg from '@/components/IconSvg'
//全局注冊icon-svg
Vue.component('icon-svg', IconSvg)
//在代碼中使用
<icon-svg icon-class="password" />
svg雪碧圖
通過這篇文章 iconfont的三種使用方式及其優(yōu)缺點，我們已經(jīng)能在項目中使用svg圖標了，但是有一個麻煩是，eg：我們會在iconfont上面創(chuàng)建一個項目，然后把需要的圖標添加到項目里，接下來再生成文件，然后把文件保存下來。然而當我再去添加幾個圖標的時候，上面的動作我們需要重來一遍，這個太麻煩了，所以我們會用到svg-sprite(svg雪碧圖,跟以前的css-sprite類似)。具體操作如下：
- 在vue項目中配置svg-sprite-loader
請參考文章vue-cli3中新添加svg-sprite-loader和file-loader - 使用svg
配置好以后，我們把svg文件都放到根目錄的icons下面，使用的時候，需要那個就加載那個，舉例：(這里的svg-icon是我們上面封裝的svg組件)
<template>
<div id="app">
<svg-icon iconClass="me"></svg-icon>
</div>
</template>
<script>
import '@/icons/svg/me.svg'
export default {
}
</script>
-
我們在項目中使用了很多svg圖標，svg-sprite-loader能幫我們把這些圖標合成一張大的雪碧圖，就像這樣
自動導入所有圖標
經(jīng)過上面的一波操作，我們實現(xiàn)了按需加載，如果我們要添加圖標，直接往icons里放就好了，這個svg的圖標可以是你們ui制作的，也可以是從iconfont圖標庫download下來的。不過，這里還有兩個地方可以再優(yōu)化一下。
- 自動導入所有圖標
首先我們創(chuàng)建一個專門放置圖標 icon 的文件夾如：@/src/icons，將所有 icon 放在這個文件夾下。 之后我們就要使用到 webpack 的 require.context。很多人對于require.context可能比較陌生，直白的解釋就是
require.context("./test", false, /.test.js$/);
這行代碼就會去 test 文件夾（不包含子目錄）下面的找所有文件名以 .test.js 結(jié)尾的文件能被 require 的文件。
更直白的說就是 我們可以通過正則匹配引入相應的文件模塊。
require.context有三個參數(shù)：
- directory：說明需要檢索的目錄
- useSubdirectories：是否檢索子目錄
- regExp: 匹配文件的正則表達式
了解這些之后，我們就可以這樣寫來自動引入 @/src/icons 下面所有的圖標了
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
復制代碼之后我們增刪改圖標直接直接文件夾下對應的圖標就好了，什么都不用管，就會自動生成 svg symbol了。
-
批量下載單個svg文件
我們上面的操作，在icons里面，一個svg文件就是一個圖標，而阿里圖標庫下載下來的文件是把所有的圖標都合在一個文件里面，這顯然不符合我們的要求，但是一個一個去下載也覺得麻煩，這時可以這樣操作
點擊批量操作，選擇要添加的圖標，點擊批量加入到購物車，去購物車頁面，點擊下載素材，出現(xiàn)以下頁面，點擊svg即可
參考文章：
