The blog-code from kimseunggyu

blog-code's People

Contributors

blog-code's Issues

next js storybook icon component 버그 해결

🐛 storybook svg 동작하지 않는 이슈 수정

// storybook/main.js
webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];

   // 이 부분
    config.module.rules.filter((rule) => rule.test.test('.svg')).forEach((rule) => (rule.exclude = /\.svg$/i));
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
        },
        {
          loader: 'url-loader',
          options: {
            name: 'static/media/[path][name].[ext]',
          },
        },
      ],
      type: 'javascript/auto',
      issuer: {
        and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
      },
    });

    return config;
  },

🐛 nextjs svg 안되는 이슈 수정

@svgr/webpack 으로 svg 파일을 인식하도록 수행! import MySVG from "./assets/mysvg.svg" 인 경우 사용
url-loader 으로 svg 파일 데이터? 를 인식하도록 수행 import { ReactComponent as MySVG } from "./assets/mysvg.svg";

/** @type {import('next').NextConfig} */
const nextConfig = {
// ...

// 이부분
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack', 'url-loader'],
    });
    return config;
  },
};