アイコンReactコンポーネント

    Icon ReactコンポーネントはIcon要素を表します。カスタムアイコン、Framework7 IconsMaterial Iconsなどですぐに利用できます。

    アイコンコンポーネント

    以下のコンポーネントが含まれています。

    • Icon (アイコン)

    アイコンのプロパティ

    PropTypeDefaultDescription
    sizenumber
    string
    アイコンのサイズ(px
    iconstringカスタムアイコンクラス
    f7stringF7アイコンのフォントアイコン名
    materialstringマテリアルアイコンの名称 フォントアイコン
    iosstringiOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
    mdstringMaterialテーマを使用した場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったもので構成されます。
    aurorastringAuroraテーマの場合に使用されるアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったもので構成されます。
    tooltipstringアイコン tooltip アイコンが押されたときに表示されるテキストです。
    tooltipTriggerstringhoverどのようにしてツールチップを開くかを定義します。hover, click, manual` のいずれかです。

    {/*  Default back icon */}
    <Icon icon="icon-back"></Icon>
    
    {/*  Some custom icon */}
    <Icon icon="icon-home"></Icon>
    
    {/*  F7 Icons font icon */}
    <Icon f7="house"></Icon>
    
    {/*  Material Icons font icon */}
    <Icon material="home"></Icon>
    
    {/*  F7 icons font icon with custom size and color */}
    <Icon f7="house" size="44px" color="blue"></Icon>
    
    {/*  Conditional icon */}
    <Icon ios="f7:house" aurora="f7:house" md="material:home"></Icon>