symbol引用
這是一種全新的使用方式,應該說這纔是未來的主流,也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合,與另外兩種相比具有如下特點:
- 支持多色圖標了,不再受單色限制。
- 通過一些技巧,支持像字體那樣,通過
font-size
,color
來調整樣式。 - 兼容性較差,支持 ie9+,及現代瀏覽器。
- 瀏覽器渲染svg的性能一般,還不如png。
使用步驟如下:
目錄結構:
第一步:引入iconfont.js:
nuxt.config.js文件中:
plugins: [{ src: "./static/font/iconfont.js", ssr: false }]
第二步:加入通用css代碼(引入一次就行):
common.js文件中:
.icon {
width: 30px; height: 30px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
nuxt.config.js文件中引入:
css: [
"./static/common.css",
"./static/font/iconfont.css"
],
第三步:挑選相應圖標並獲取類名,應用於頁面:
<template>
<section class="container">
<div>
<!-- 無顏色 -->
<i class="iconfont icon--message" style="font-size:30px"></i>
<i class="iconfont" style="font-size:30px"></i>
<!-- 有顏色 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon--message"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon--strategy"></use>
</svg>
</div>
</section>
</template>
頁面: