如何在反應中為我的 svg 圖像添加顏色

Question

我有一個圖標列表。 我想將圖標顏色更改為白色。 默認情況下，我的圖標是黑色的。 大家有什么建議嗎？

我通常在我的 css 中使用'fill: white'但現在我在 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;
}

Answer 1

我使用這種方法來避免為每個圖標創建一個 React 組件的需要。 正如文檔所說，您可以將 SVG 文件作為反應組件導入。

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

如果您想更改 fill 屬性，您必須將 SVG fill的值設置為current那么您可以像這樣使用它：

<svg fill="current" stroke="current" ....> ... </svg>

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill='red' stroke='green'/>
  </div>
);

Answer 2

使用您的 svg 作為組件，然后所有 svg 優點都可以訪問：

        const MenuIcon = (props) =>(
            <svg xmlns="http://www.w3.org/2000/svg" fill={props.fill} className={props.class}></svg>
            )

在你的渲染中

  <li>
   <a href="/" className="sidebar__link">
    <MenuIcon fill="white"/>
   </a>
  </li>

Answer 3

您可以通過訪問g或path來更改 svg 的 css。 從 create-react-app 2.0 版開始

import React from 'react'
import {ReactComponent as Icon} from './home.svg';

export const Home = () => {

    return (
        <div className='home'>
            <Icon className='home__icon'/>
        </div>
    );
};

.home__icon g {
 fill: #FFFFF;
}
.home__icon path {
 stroke: #e5e5e5;
 stroke-width: 10px;
}

Answer 4

如果您使用的是create-react-app ，則可以使用如下

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

最重要的部分不要忘記將它們作為ReactComponent as Logo導入

創建 React 應用程序文檔

Answer 5

就我而言，我需要刪除我的 svg 文件的這一部分以使其工作：

<style type="text/css">
    .st0{fill:#8AC6F4;}
</style>

然后這有效

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

Answer 6

從 React 16.13.1 ，您可以直接使用 SVG 作為組件並傳遞fill 16.13.1來更改顏色。 請看下面的例子：

home.svg

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z"/></svg>

ShowIcon/index.js

import React from 'react';

import HomeIcon from './home.svg';

const ShowIcon = props => {
    return (
        <HomeIcon fill='#ccc' />
    )
}

export default ShowIcon;

但是，我在使用幾個圖標進行測試后注意到它不適用於所有圖標。 因此，請在使用前進行測試。

Answer 7

如果你想改變svg的顏色而不改變svg的樣式或者不改變svg本身的代碼。

您也可以將 svg 的顏色更改為圖像。

這可以通過應用 css 的過濾器屬性來完成。 將您的顏色更改為 css filter 。

對於藍色

• 十六進制代碼 = #0000ff
• 藍色過濾： invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%);

代碼

<img src="path/to/svg" 
  style={{filter: "invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%)"}} 
/>

參考

Answer 8

我遇到了同樣的問題，嘗試了大部分建議都沒有運氣。

我用一種非常簡單的方式解決了它......無需為SVG圖像創建組件

>>> 僅在 .svg 文件中的<path fill='#9d8189' ...></path>中添加所需的顏色作為填充

Answer 9

我找到了一個有趣的解決方案來解決這個問題。 不知道它是否在所有情況下都有效......好吧，所以我有一個像這樣導入的 svg：

import LockIcon from "../assets/lock.svg"

然后將其渲染為：

<LockIcon color={theme.colors.text.primary} />

然后在 lock.svg 中，我只在 svg 標簽中添加了fill="currentColor" 。

希望這對你們中的一些人有用。

Answer 10

我的建議是使用像 SVG 到字體轉換器這樣的工具， icomoon是我最喜歡的，創建你自己的自定義字體庫來導入你的 SVG 圖標

道具

• 使用 CSS 更改圖標的顏色、字體大小等
• 一次導入即可在整個項目中使用
• 他們提供了一些免費的圖標/圖標包

缺點

• 初始學習曲線
• 在創建 SVG 圖標時正確遵循尺寸、輪廓等
• 多色圖標很難