自訂圖示

PrimeVue 元件可以使用樣板功能與任何圖示庫搭配使用。

材質 #

Material 圖示是基於 Google Material Design 的官方圖示庫。


<Select>
    <template #dropdownicon>
        <span class="material-icons">arrow_drop_down</span>
    </template>
</Select>

FontAwesome #

Font Awesome 是擁有廣泛圖示的熱門圖示庫。


<Select>
    <template #dropdownicon>
        <i class="fa-light fa-chevron-down"></i>
    </template>
</Select>

SVG #

內嵌 SVG 會嵌入在 dom 內部。


<Select>
    <template #dropdownicon>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <g id="chevron-down">
                <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
            </g>
        </svg>
    </template>
</Select>

圖片 #

任何類型的圖片都可以用作圖示。


<Select>
    <template #dropdownicon>
        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
    </template>
</Select>

教學影片 #

示範如何自訂圖示的教學影片。