npm install --save-dev vite-plugin-svgr
yarn add -D vite-plugin-svgr
pnpm add -D vite-plugin-svgr
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
/* 여기서부터
svgr(
{
exportAsDefault: true,
svgrOptions: {
icon: true,
},
}
),
여기까지 */
],
server: {
port: 3000,
},
});
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
"include": ["src", "custom.d.ts"],
public/svg
에 있는 파일을 src/assets/svg
폴더에 tsx
파일로 바꾸어 준다는 뜻이다. "svgr" : "npx @svgr/cli -d src/assets/svg --ignore-existing --typescript --no-dimensions public/svg"
public에 svg 폴더를 생성 후 해당 폴더에 svg 파일을 넣는다.
pnpm svgr
/ yarn svgr
/ npm svgr
등 각자의 패키지 매니저 명령어와 함께 svgr을 입력한다.
src/assets/svg 폴더에 public/svg 폴더에 있던 svg 파일들이 tsx형태로 저장된다.
이를 가져다 쓰면 된다
이제 width, height를 지정해줘도 에러가 나지 않는다 !!!