我有一个正在运行的应用程序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
项目应用样式(例如:填充)时,我遇到了这个问题,它不起作用并且没有任何变化。
您是否应该推荐一种实施这种情况的方法?
感谢您观看这个问题。