web-dev-qa-db-ja.com

ANTDデザインメニューにカスタム画像/アイコンを追加するにはどうすればよいですか？

この例の使用： https://ant.design/components/layout/#components-layout-demo-side

デフォルトのアイコンの代わりにカスタム画像またはアイコンを追加するにはどうすればよいですか。

私は試した：

<Menu.Item to="/" key="2">
  <img className="ant-menu-item" src={require('image.png')} />
  <span>Shopify</span>
  <Link to="/shopify">Home</Link>
</Menu.Item>

しかし、それは見栄えがよくないか、崩壊した行動を尊重していません

javascriptcssreactjsantd
4
johnnyshrewd
<Menu.Item to="/" key="2">
    <img className="ant-menu-item" src=="{{ "image.png" | asset_url }}"/>
    <span>Shopify</span>
    <Link to="/shopify">Home</Link>
</Menu.Item>
5
Abhijit

カスタムアイコンを作成するいくつかの異なる方法を試しましたが、最も簡単で最も効果的な方法は、antd componentコンポーネントのIconプロパティを使用することでした。使用したい画像を返す機能コンポーネントを指定するだけです。

_<Icon component={() => (<img src="/image.svg" />)} />
_

これは、組み込みのアイコンのようにアイコンがメニューテキストと完全に一致しないことを除いて、メニュー項目とサブメニュー内でうまく機能するようです。これを補うためにCSSにtransform: translateY(-3px)を追加することになりました（使用する画像によって異なる場合があります）。

一方、 公式ソリューション （SVGイメージの場合のみ）は、 @ svgr/webpackプラグイン を使用してSVGファイルをコンポーネントに変換することです。これには、レイアウトと色付けに関していくつかの利点があります（antdアイコンは、SVG画像ファイルの_<svg>_要素よりも実際の_<img>_要素を好むようです）。でも、設定の手間がかからなかったのでわかりません。

5
aldel

これがうまくいくことを願っています。別のcssファイルを処理してこのコードを配置する必要があります

.ant-menu-item{background-image: url("theme5.jpg");}
0
jayanes