web-dev-qa-db-ja.com

Material-UIを備えたSVGアイコン：どこで見つけ、どのようにスタイルするか？

http://www.material-ui.com/#/components/app-bar では、サポートされる可能性のあるプロパティの中に「iconElementLeft ... element ... SvgIconなどのアプリバーの左側に表示されます。」

私が現在持っているものは、メニューバーの他の物とはスタイルが異なります...見つけたsvgアイコンをポイントし、img属性を使用してそれを適合させようとしています。Material-UIスタイルを作成するにはどうすればよいですかそれはネイティブのもののようですか？

export default (props)=>{
return (
    <AppBar
        title={<span style={styles.title}><Link to="/" className="logoLink">GIGG.TV</Link></span>}
        className="header"
        iconElementLeft={<img src='../../public/img/rocket.svg' height='40' width='40' alt='' />}
        // showMenuIconButton={false}
        iconElementRight={
            <IconMenu
              iconButtonElement={
                <IconButton><MoreVertIcon /></IconButton>
              }
              targetOrigin={{horizontal: 'right', vertical: 'top'}}
              anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            >
              <MenuItem
                linkButton={true}
                primaryText="Home"
                containerElement={<Link to="/" className="logoLink">GIGG.tv</Link>} />

              <MenuItem primaryText="Sign in" containerElement={ <SignInModal/>} />
              <MenuItem
                linkButton={true}
                primaryText="Login as Artist"
                containerElement={<Link to="/artistSignIn" >Sign in/Up </Link>} />
            </IconMenu>
          }/>
    )
}

または、Material-UI NPMパッケージのすべてのアイコンを調べて、機能する可能性のあるネイティブなアイコンがあるかどうかを確認するにはどうすればよいですか？

svgreactjsmaterial-designmaterial-ui
9
Mad Bernard

二つの方法...

  1. SvgIconを使用してsvgをインライン化する

    SvgIconコンポーネント を使用すると、必要なSvgアセットを含めることができます。

  2. 既存のmaterial-uiアセットのインポート変数にインポートして使用します。

    fileCloudDownloadを「material-ui/lib/svg-icons/file/cloud-download」からインポートします。

    ...

    iconElementLeft = {FileCloudDownload}

また、上のリンクにスタイリングの例が表示されます。

8
hazardous

ここにすべてのリストがあります。サポートされているベクトルアイコン

https://www.materialui.co/icons

このようにインポートします

import ModeTrain from 'material-ui/svg-icons/maps/train';
import ActionInfo from 'material-ui/svg-icons/action/info';
import ModeBUS from 'material-ui/svg-icons/maps/directions-bus';

フォルダ構造は

material-ui/svg-icons -->category-->iconName

VSコードのオートコンプリートを使用してアイコンを取得/検索する

次に、以下のようなアイコンを使用します。例：ModeBUS

<ListItem
    leftAvatar={<Avatar icon={<ModeBUS />} />}
    rightIcon={<ActionInfo />}
    primaryText="Recipes"
    secondaryText={

      <p>
        <span >
          From: Station
            <br />
        </span>

        <span>
          To: Station
            <br />
        </span>
      </p>
    }
    secondaryTextLines={8}
  />
0
Hitesh Sahu