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

您可以通过访问 g 或路径来更改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 2

我使用这种方法来避免需要为每个图标创建一个React组件。正如docs所说，您可以将SVG文件作为react组件导入。

1         0.582371
2         0.582605
3         0.582605
4         0.612935
             ...   
999       0.223501
1000      0.177610

如果要更改fill属性，则必须将SVG const hobbies = ['string 1', 'string 2', 'string 3']; console.log(hobbies.join()); // you can also modify the union char (default ',') console.log(hobbies.join(' - '));的值设置为import { ReactComponent as Logo } from './logo.svg'; const App = () => ( <div> {/* Logo is an actual React component */} <Logo /> </div> );，然后可以像这样使用它：

fill

current

Answer 3

就我而言，我需要删除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 4

从React 16.13.1开始，您可以将SVG直接用作组件，并传递fill道具来更改颜色。请看下面的例子：

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 5

将您的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 6

如果您使用的是create-react-app，则可以按以下方式使用

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

最重要的部分是不要忘记将它们导入为ReactComponent as Logo

Create React app documentation

Answer 7

我的建议是使用SVG之类的工具进行字体转换器，icomoon是我的最爱，创建自己的自定义字体库以导入SVG图标

道具

使用CSS更改图标的颜色，字体大小等
一次导入即可在整个项目中使用
他们提供了一些免费的图标/图标包

缺点

初始学习曲线
在创建SVG图标时正确遵循尺寸，轮廓等
难以获得彩色图标

Answer 8

如果你想改变svg的颜色而不改变svg的样式或者不改变svg本身的代码。

您也可以将 svg 的颜色更改为图像。

这可以通过应用 css 的过滤器属性来完成。 Change your color to 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%)"}} 
/>

Reference

我该如何在我的svg图像中添加颜色

8 个答案: