Symbol 彩色圖標(biāo)這是一種全新的使用方式，應(yīng)該說這才是未來的主流

優(yōu)缺點介紹

• 支持多色圖標(biāo)了，不再受單色限制。Font class 和 Unicode只能調(diào)整圖標(biāo)大小，顏色等等；默認情況下不支持多色，直接添加多色圖標(biāo)會自動去色。
• Symbol 不能設(shè)置color屬性；Font class 和 Unicode圖標(biāo)可以通過一些技巧，支持像字體那樣，可通過font-size, color 來調(diào)整樣式。
• 兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。
• 瀏覽器渲染 SVG 的性能一般，還不如 png。建議使用的時候?qū)⑵胀▓D標(biāo)和彩色圖標(biāo)分開始用

阿里矢量素材圖標(biāo)庫

1.Symbol 彩色圖標(biāo)

添加項目

image.png

image.png

image.png

下載項目

image.png

編輯圖標(biāo)

1. 將下載的包解壓 修改個看得過去的名字

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

此時文件夾內(nèi)會有 iconfont 文件夾

uni-app 引用

打開生成的iconfont文件夾，將 iconfont.css引入 項目中的static文件中，文件管理隨項目規(guī)定

image.png

圈出來的都是可以直接在文件中更改的 用的時候用更改過后的名字就好, 為了方便 我將.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)建一個普通圖標(biāo)的項目，添加普通圖標(biāo)不需要下載

2. 進入我的項目 點擊 暫無代碼，生成代碼

image.png

image.png

3.在uni-app向程序的static中創(chuàng)建一個icon.css文件 復(fù)制點開的鏈接中的代碼

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