使用带有 CSS-Modules 的 ReactJS 对 SVG 元素进行样式化答案

【问题标题】：Stylizing SVG element using ReactJS with CSS-Modules使用带有 CSS-Modules 的 ReactJS 对 SVG 元素进行样式化
【发布时间】：2016-02-16 11:59:12
【问题描述】：

我有一个在 ReactJS 上运行的应用程序。我正在使用 CSS-Modules 进行内联样式。我有一个单独的带有图标的svg 文件，我想在我的组件的css 文件中对其进行样式化。

这是一个图标MyComponent/add.svg：

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 533.333 533.333" style="enable-background:new 0 0 533.333 533.333;" xml:space="preserve;">
<g>
    <path d="M516.667,200H333.333V16.667C333.333,7.462,325.871,0,316.667,0h-100C207.462,0,200,7.462,200,16.667V200H16.667   C7.462,200,0,207.462,0,216.667v100c0,9.204,7.462,16.666,16.667,16.666H200v183.334c0,9.204,7.462,16.666,16.667,16.666h100   c9.204,0,16.667-7.462,16.667-16.666V333.333h183.333c9.204,0,16.667-7.462,16.667-16.666v-100   C533.333,207.462,525.871,200,516.667,200z" />
</g>
</svg>

这是我的 MyComponent/MyComponent.css

.iconButton {

}

.icon {
  height: 50px;
  width: 50px;
  margin-left: 25px;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: 5px;
}


.iconAdd {
  composes: icon;
  background: url('./add.svg');
}

这是我的 MyComponent/MyComponent.jsx

中的一段代码

import React, { Component } from 'react';
import styles from './MyComponent.css';

export default class MyComponent extends Component {
    render() {
        return (
            <div className={ styles.iconButton }>
                <div className={ styles.iconAdd }></div>
                <div>add</div>
            </div>
        );
    }
}

它工作正常。但是当我尝试为svg 项目应用样式（例如：填充）时，我遇到了这个问题，它不起作用并且没有任何变化。

您是否应该推荐一种实现此案例的方法？

感谢您观看这个问题。

【问题讨论】：

是否部署在任何地方？
您不能将样式应用于用作背景图像的SVG 元素。在SASS 的帮助下，并非没有一些复杂的字符串操作，我描述了here。要更好地控制您的SVG（使用CSS），请先将其内联...

标签： javascript css svg reactjs css-modules

【解决方案1】：

我需要以某种方式在我的应用程序中使用SVG 图标进行操作。这就是我使用@robjez 建议并首先内联它们的原因。

我为每个需要风格化的图标实现了几个React 组件。下面是一个小示例：

export default class FolderIcon extends Component {
    render() {
        return (
            <svg viewBox="0 0 475.082 475.082">
                <g>
                    <path d="M456.239,128.475c-12.56-12.562-27.597-18.842-45.11-18.842h-191.86v-9.136c0-17.511-6.283-32.548-18.843-45.107   c-12.562-12.562-27.6-18.846-45.111-18.846H63.953c-17.515,0-32.551,6.283-45.111,18.846C6.28,67.949,0,82.986,0,100.497v274.088   c0,17.508,6.28,32.545,18.842,45.104c12.562,12.565,27.6,18.849,45.111,18.849h347.175c17.514,0,32.551-6.283,45.11-18.849   c12.566-12.56,18.843-27.597,18.843-45.104V173.59C475.082,156.078,468.805,141.042,456.239,128.475z" />
                </g>
            </svg>
        );
    }
}

之后我可以使用CSS Modules 并从Component 的代码中对SVG 进行样式化。

.icon svg {
    fill: #FFFFFF;
}

这是使用示例：

import FolderIcon from '../FolderIcon.jsx';
import styles from './Folder.css';

export default class Folder extends Component {
    render() {
        return <FolderIcon className={styles.icon} />;
    }
}

【讨论】：