'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