Symbol 彩色圖標(biāo)這是一種全新的使用方式蜒简，應(yīng)該說這才是未來的主流
優(yōu)缺點(diǎn)介紹
- 支持多色圖標(biāo)了糯累，不再受單色限制逞度。
Font class和Unicode只能調(diào)整圖標(biāo)大小悍手，顏色等等逢慌；默認(rèn)情況下不支持多色悠轩，直接添加多色圖標(biāo)會自動去色。 - Symbol 不能設(shè)置
color屬性攻泼；Font class和Unicode圖標(biāo)可以通過一些技巧火架，支持像字體那樣，可通過font-size,color來調(diào)整樣式忙菠。 - 兼容性較差何鸡，支持 IE9+，及現(xiàn)代瀏覽器只搁。
- 瀏覽器渲染 SVG 的性能一般音比，還不如 png。建議使用的時(shí)候?qū)⑵胀▓D標(biāo)和彩色圖標(biāo)分開始用
阿里矢量素材圖標(biāo)庫
1.Symbol 彩色圖標(biāo)
添加項(xiàng)目
image.png
image.png
image.png
下載項(xiàng)目
image.png
編輯圖標(biāo)
1. 將下載的包解壓 修改個(gè)看得過去的名字
2. 打開 win + r 打開 cmd, 在 cmd 中打開已解壓的文件夾 cd 文件地址
image.png
3. 安裝 iconfont-tools
npm install -g iconfont-tools
4. 執(zhí)行 iconfont-tools
iconfont-tools
根據(jù)提示 填寫相關(guān)信息
image.png
此時(shí)文件夾內(nèi)會有
iconfont文件夾
uni-app 引用
打開生成的iconfont文件夾氢惋，將 iconfont.css引入 項(xiàng)目中的static文件中洞翩，文件管理隨項(xiàng)目規(guī)定
image.png
圈出來的都是可以直接在文件中更改的 用的時(shí)候用更改過后的名字就好, 為了方便 我將
.icon的width和height調(diào)整成了300rpx
打開 app.vue 文件
<style lang="scss">
// 引入阿里矢量素材圖標(biāo)庫
@import '@/static/iconfont.css';
.
.
.
</style>
頁面使用
<template>
<view class="icon icon-a-jiujiuping"></view>
</template>
image.png
2.Font class普通單色圖標(biāo)
1. 創(chuàng)建一個(gè)普通圖標(biāo)的項(xiàng)目，添加普通圖標(biāo)不需要下載
2. 進(jìn)入我的項(xiàng)目 點(diǎn)擊 暫無代碼焰望，生成代碼
image.png
image.png
3.在uni-app向程序的static中創(chuàng)建一個(gè)icon.css文件 復(fù)制點(diǎn)開的鏈接中的代碼
image.png
@font-face {
font-family: "iconfont"; /* Project id 3365557 */
src: url('https://at.alicdn.com/t/font_3365557_u8wf0h1d7k.woff2?t=1651127283524') format('woff2'),
url('https://at.alicdn.com/t/font_3365557_u8wf0h1d7k.woff?t=1651127283524') format('woff'),
url('https://at.alicdn.com/t/font_3365557_u8wf0h1d7k.ttf?t=1651127283524') format('truetype');
}
4.在app.vue中引入icon.css
<style lang="scss">
// 引入阿里矢量素材圖標(biāo)庫
@import '@/static/iconfont.css'; // 彩色圖標(biāo)
@import '@/static/icon.css'; // 普通圖標(biāo)
.
.
.
</style>
5.頁面使用
<template>
<!-- 彩色圖標(biāo) -->
<view class="icon icon-a-jiujiuping"></view>
<!-- 普通圖標(biāo) -->
<view class="iconfont icon-settings"></view>
</template>
image.png
image.png
