Storybook에서 SVGR 설정

.storybook/main.ts파일에서 

webpackFinal 부분을 추가해주면 된다!

 

 

나는 svg파일은 잘 가져와지나 width, height 등이 적용되지 않았다

그럴 때는 아래 소스를 추가해줘야 한다

options: { icon: true }

svg파일이 React 컴포넌트로 변환될 때, svg파일을 아이콘으로 사용할 수 있도록 해준다
즉, width, height, color..등 기능을 사용할 수 있도록 해준다
 

import type { StorybookConfig } from '@storybook/nextjs'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@storybook/addon-themes',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  webpackFinal: async (config) => {
    const imageRule = config.module?.rules?.find((rule) => {
      const test = (rule as { test: RegExp }).test

      if (!test) {
        return false
      }

      return test.test('.svg')
    }) as { [key: string]: any }

    imageRule.exclude = /\.svg$/

    config.module?.rules?.push({
      test: /\.svg$/i,
      use: [{ loader: '@svgr/webpack', options: { icon: true } }],
    })

    return config
  },
}
export default config

 

성공!

 

참고자료 - https://github.com/storybookjs/storybook/issues/18557