簡(jiǎn)述
VUE項(xiàng)目iconfont自定義SVG,在線或者離線下載的阿里巴巴icon font.js序厉；并非SVG文件畦娄；
前情提示
VUE2沈撞； 在線或者離線下載的阿里巴巴icon font.js蜈垮；并非SVG文件灌曙； 文中使用的icon僅用于演示菊碟；
一說
同步更新最新版、完整版請(qǐng)移步PUSDN Powered By PUSDN - 平行宇宙軟件開發(fā)者網(wǎng)www.pusdn.com 在刺，轉(zhuǎn)載請(qǐng)標(biāo)明出處逆害！部分截圖、鏈接等因過期蚣驼、更換域名魄幕、MD語法等可能不顯示，可聯(lián)系反饋（備注好博文地址）隙姿，謝謝?
帶有
#號(hào)梅垄、刪除線、不操作、不執(zhí)行字樣的為提示或者備份bash队丝，實(shí)際不執(zhí)行
創(chuàng)建iconfont項(xiàng)目并配置
具體詳見 https://janeyork.blog.csdn.net/article/details/121525265 注意：這里直接引用的symbol JS文件靡馁，而不是SVG文件
tips: 如下圖，可以看到svg彩色机久，而其他還是黑白臭墨，還有幾個(gè)圓圈沒有展現(xiàn)出來
symbol介紹
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n23" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">這是一種全新的使用方式，應(yīng)該說這才是未來的主流膘盖，也是平臺(tái)目前推薦的用法胧弛。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè)svg的集合，與上面兩種相比具有如下特點(diǎn)：
支持多色圖標(biāo)了侠畔，不再受單色限制结缚。
通過一些技巧，支持像字體那樣软棺，通過font-size,color來調(diào)整樣式红竭。
兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器喘落。
瀏覽器渲染svg的性能一般茵宪，還不如png。</pre>
引入到項(xiàng)目中
將下載的JS瘦棋，放到src/components/iconfont/web（沒有就新建一個(gè)目錄稀火，或者隨便那個(gè)目錄都行asset也行），如下圖（因?yàn)槟J(rèn)沒有勾選SVG赌朋，所有沒有下載SVG文件）
新建組件
components/SvgIcon/index.vue凰狞，內(nèi)容如下：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="vue" cid="n29" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;"><template>
<svg class="svgClass" :style="{ fontSize: size + 'px', color: color }" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'svgIcon',
props: {
icon: {
type: String,
required: true
},
color: {
type: String,
default: 'rgba(0, 0, 0, 0.65);'
},
size: {
type: Number,
default: 16
}
},
data() {
return {};
},
computed: {
iconName() {
return #pgz-icon-${this.icon};
}
}
};
</script>
<style scoped>
.svgClass {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
outline: 0;
}
</style></pre>
其他組件中使用（單次）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="vue" cid="n32" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;"><template>
<div class="icon-container">
<svg-icon icon="renzheng" :size="30" class="aaa" />
</div>
</template>
<style lang="scss" scoped>
.aaa {
pointer-events: none;
}
</style></pre>
全局引入組件（可選）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n34" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">// main.js全局引入iconfont.js和自定義的IconSvg組件
import '@/components/iconfont/web/iconfont.js'
import svgIcon from '@/components/svgIcon'
Vue.component('svg-icon', svgIcon);</pre>
最終效果
其他
單個(gè)VUE組件中引入在線CDN
也可以全局在index.html全局引入。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n41" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">css:
<style scoped>
@import '//at.alicdn.com/t/font_2962455_7ntq6or5rrp.css';
</style>
js：
第一種方式：利用Vue的mounted生命周期
mounted() {
const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = '//at.alicdn.com/t/font_2962455_t01nol36dtr.js';
document.body.appendChild(oScript);
},</pre>
如果是SVG文件箕慧，需要服球，此處不做SVG介紹
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n43" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-color: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">npm install --save-dev svg-sprite-loader
或者
yarn add svg-sprite-loader -D
或者查看ant design vue pro vue2版本中用的yarn add -D vue-svg-icon-loader
同時(shí)還要考慮到config.js等配置</pre>
額外
vue自定義icon：https://janeyork.blog.csdn.net/article/details/121525265
