1. 程式人生 > 其它 >vue3 + element plus 使用位元組跳動圖示

vue3 + element plus 使用位元組跳動圖示

使用場景:

提一下vue2 用法>>

下面回到正題 vue3 用法

1  安裝包:


npm install @icon-park/vue-next --save

位元組跳動圖示庫取圖地址>>    

3  用法:


<template>
  <div class="mm">
<!-- 使用 -->
    <home-two theme="outline" size="16" />
    <application-one theme="outline" size="16"  fill="#f00"/>
    <dislike theme="outline" size="16" fill="#fe4800"/>
  </div>
</template>
<script setup>
import {HomeTwo, ApplicationOne, Dislike} from '@icon-park/vue-next'  // 單個匯入
components: {HomeTwo, ApplicationOne, Dislike}  // 註冊
</script >
 
效果圖: 我這裡用到場景: element plus 側邊欄  移入 移出 跟著本來的移入移出的顏色改變圖示顏色 經過我多次 點選  移入  hover 改變變數 等各種嘗試 發現 只需要將 標籤 上的 fill 刪除就會隨著 本來的顏色 改變了 如例子:<home-two theme="outline" size="16" fill="#fe4800"/> 去掉後:<home-two theme="outline" size="16" /> 就可以了 以下是期望結果