カスタムアイコン

PrimeReactコンポーネントは、テンプレート機能を使用して、任意のアイコンライブラリで使用できます。アイコンには、元のアイコンのiconPropsとコンポーネントのpropsが渡されます。

Material#

Material icons は、Google Material Designに基づいた公式のアイコンライブラリです。


import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

<Dropdown dropdownIcon={(options) => <ArrowDropDownIcon {...options.iconProps} />} />

Font Awesome#

Font Awesomeは、幅広いアイコンを備えた人気のアイコンライブラリです。


// use the CSS style directly
<Dropdown dropdownIcon="fa-light fa-chevron-down" />

// use the pre-built icons
<Dropdown dropdownIcon={(options) => <FontAwesomeIcon icon={["fal", "chevron-down"]}  {...options.iconProps} /> } />

SVG#

インラインSVGは、DOM内に埋め込まれます。


<Dropdown dropdownIcon={(options) => 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...options.iconProps}>
        <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>} />

画像#

あらゆる種類の画像をアイコンとして使用できます。


<Dropdown dropdownIcon={(options) => <img alt="dropdown icon" src="/icons/arrow_down.png" {...options.iconProps} />} />