svg를 리액트 컴포넌트로 가져오면 width, height를 css에서 설정할 수 없나요?

Question

안녕하세요, svg파일을 ReactComponent화 해서 사용하고 있는데요, width와 height 속성을 css에서 설정해도 적용되지 않아 질문드립니다.이게 안 되는게 맞다면 모든 svg 파일에 각각 current 속성을 입력해 주어야 할 텐데요......나중에는 svg 이미지가 한 두 개가 아니게 될 것이고, 분명 비효율적인 방법인 것 같아 다른 방법을 아시는 분이 있으면 알려주셨으면 하여 글을 올려봅니다.import styles from './MainPage.module.scss'; import CustomerIcon from '../../assets/icons/fonts/groups_black_24dp.svg'; import HostIcon from '../../assets/icons/fonts/person_black_24dp.svg'; function MainPage() { return (

); };scss 파일.icon{ display:block; margin-bottom: 5%; fill: red; width: 100px; height:100px;}type declaration 파일declare module '*.svg' { import { ReactElement, SVGProps } from 'react'; const content: (props: SVGProps) => ReactElement; export default content;}fill 속성은 제대로 적용이 되는데요, width와 height만 적용이 되지 않습니다.svg 파일에 width height를 current로 지정하면 정상 적용되긴 합니다만......일반 svg 태그처럼 css에서 바로 resize할 수 있는 방법이 없을까요?감사합니다 (_ _)

콩콩시 · Answer

일반적인 방법으로는 불가능 합니다.svg는 속성에 대해서 값을 주어야 합니다.아니면 넓이와 높이만 바꾸시려면 svg 경로를 img 테그에 주셔도 되겠네요.예) <img src&#61;'./블라블라.svg'/>

svg를 리액트 컴포넌트로 가져오면 width, height를 css에서 설정할 수 없나요?

1개의 답변

Q&A 목록