I am developing an app using ReactJS and incorporating CSS-Modules for inline styles. Within my project, I have a separate svg file that contains an icon which I want to stylize in my component's css file.
Displayed below is the icon located at 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>
Here is the snippet from my 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');
}
Below is an excerpt from my 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>
);
}
}
Although this setup is functioning properly, I encountered an issue when attempting to apply styles to the svg item (such as fill) without success.
If you have any recommendations on how to address this particular case, your input would be highly appreciated. Thank you for reviewing this question.