カスタムアイコン

PrimeVueコンポーネントは、テンプレート機能を使用して任意のアイコンライブラリで使用できます。

マテリアル #

マテリアルアイコンは、Googleマテリアルデザインに基づいた公式のアイコンライブラリです。


<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>

ビデオチュートリアル #

アイコンのカスタマイズ方法を示すビデオチュートリアルです。