自定义图标

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>

视频教程 #

一个演示如何自定义图标的视频教程。