web-dev-qa-db-ja.com

リアクションでSVG画像に色を追加するにはどうすればよいですか

アイコンのリストがあります。アイコンの色を白に変えたい。デフォルトでは、アイコンは黒です。何か提案がありますか？

私は通常'fill: white'私のcssで、Reactでこれを実行しているので...機能していません！

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}
htmlreactjscss
13
Deejay

私の提案は、SVGからフォントコンバーターなどのツールを使用することです icomoon は私のお気に入りで、SVGアイコンをインポートするための独自のカスタムフォントライブラリを作成します

小道具

  • アイコンのCSSで色、フォントサイズなどを変更する
  • 1回のインポートでプロジェクト全体で使用
  • 彼らはいくつかの無料のアイコン/アイコンバンドルを提供しています

短所

  • 初期学習曲線
  • SVGアイコンを作成する際は、寸法、輪郭などを適切に守ってください
  • 多色アイコンが難しい
0
Jaison