'How to add a className to an SVG React Component
I'm now using inline style for the SVG react component, because if I replace it with className={s.some_class} it does not work.
This works
import React from 'react'
import s from './styles.module.css'
import { ReactComponent as Folder } from '../../assets/SVGs/folder.svg'
export default function Projects() {
return <Folder style={{ color: 'aqua', width: '42px' }} />
}
This does not work
import React from 'react'
import s from './styles.module.css'
import { ReactComponent as Folder } from '../../assets/SVGs/folder.svg'
export default function Projects() {
return <Folder className={s.some_class} />
}
My styles.module.css
.some_class {
color: aqua;
width: 42px;
}
Why doesn't className work for SVG component? and what's the approach here?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
