?? 之前大部分 icon 是png圖片糕珊，當有兩種狀態(tài)時就需要兩種圖片的替換动分，占用的體積也是比較大的，后來接觸到了阿里iconfont红选，簡直不能太好用澜公，接下來就帶你領(lǐng)略 vue 的美好！
1. 使用阿里iconfont
- iconfont 官網(wǎng)上選擇自己想要的圖標喇肋，如果沒有想要的圖標揍诽，就讓ui在 adobe illustrator（簡稱 AI）軟件上繪制想要的圖標茁计，繪制前先下載 圖標制作模板.AI，繪制完成后一定要存儲為 svg，不要使用導出為 svg妓美，然后在上傳到 iconfont 官網(wǎng) 上就可以了潮峦。 參考
AI軟件
上傳后的圖標
- 將圖標添加到購物車入偷，點擊購物車嘹屯，添加至項目（方便日后項目管理），在項目目錄下低葫，點擊下載至本地详羡，就拿到字體文件了。
項目目錄
- 在 src/assets 目錄下創(chuàng)建一個 fonts 文件夾嘿悬，將解壓后的 iconfont.eot殷绍、 iconfont.svg、 iconfont.ttf鹊漠、 iconfont.woff 這 4 個文件放進去主到。
下載并解壓后的字體文件
fonts 文件夾
- 將解壓后的 iconfont.css 文件放到 src/assets 目錄下茶行，并修改里面的字文件路徑，主要在 url 的位置新增 ./fonts/ 登钥。
修改后的 iconfont.css 文件
- 在 main.js 中引入 iconfont.css畔师，加入以下代碼：
import '@/assets/iconfont.css'
- 在要引入圖標的 .vue 文件中的相應位置寫以下的代碼：（注意：
icon-eye是在iconfont.css文件中的類名，）
<i class="iconfont icon-eye" ></i>
HelloWorld.vue
效果圖
2. vue項目運行 svg 文件牧牢，與上文無聯(lián)系看锉，要說有點聯(lián)系的話最多也就是如何讓 ui給你想要的svg 文件的做法和上文的相同
- 安裝
svg-sprite-loader插件，運行以下命令：
npm i svg-sprite-loader -D
- 修改 webpack 的配置文件塔鳍，在
webpack.base.conf.js中修改如下代碼：
image.png
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
- 在 src 目錄新建一個 icons 文件夾伯铣，里面放三個內(nèi)容：1)、 存放 .svg 文件的 svg文件夾 轮纫； 2)腔寡、 全局注冊組件的 index.js 文件 ；3)掌唾、svgo.yml 文件放前。
// index.js 文件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg組件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
- svgo.yml 文件：
# replace default config
# multipass: true
# full: true
plugins:
# - name
#
# or:
# - name: false
# - name: true
#
# or:
# - name:
# param1: 1
# param2: 2
- removeAttrs:
attrs:
- 'fill'
- 'fill-rule'
- 注冊 Svgicon 組件。 在 components 文件夾下新建 SvgIcon 文件夾糯彬，里面放置 index.vue 文件凭语， 代碼如下：
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- main.js 中引入全局注冊組件的 index.js 文件，main.js中要加的代碼如下：
import '@/icons' // 全局注冊組件
- 需要使用圖標的地方（.vue 文件）使用以下代碼：
<svg-icon icon-class="icon_set"/>
項目目錄
