[Next.js] Next에서 svg 사용하기

 

📍  패키지 설치

yarn add -D @svg/webpack

 

📝 next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

export default nextConfig;

 

📝스토리북에도 적용

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

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/addon-styling-webpack',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['../public'],
  webpackFinal: async (config) => {
    config.module = config.module || {};
    config.module.rules = config.module.rules || [];

    // This modifies the existing image rule to exclude .svg files
    // since you want to handle those files with @svgr/webpack
    const imageRule = config.module.rules.find((rule) =>
      rule?.['test']?.test('.svg')
    );
    if (imageRule) {
      imageRule['exclude'] = /\\.svg$/;
    }

    // Configure .svg files to be loaded with @svgr/webpack
    config.module.rules.push({
      test: /\\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

export default config;

 

📍 svg index에서 관리

- 폴더 구조

 

public/icons/index.ts에서 svg를 한 번에 관리한다

import LogoText from './logo-text.svg';
import MenuLine from './menu-line.svg';
import SearchLine from './search-line.svg';

export { LogoText, MenuLine, SearchLine };

• 이렇게 하면 컴포넌트 불러오듯이 svg도 편하게 불러올 수 있다

 

📍 svg 파일 수정 (custom)

svg의 크기나 색상을 지정하고 싶다면 먼저 해당 svg 파일로 간다

<svg width="current" height="current" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9374 2.0835C9.52551 2.08362 8.13413 2.42138 6.87933 3.06859C5.62453 3.71581 4.5427 4.65372 3.7241 5.80407C2.9055 6.95442 2.37387 8.28386 2.17355 9.68146C1.97324 11.0791 2.11005 12.5043 2.57258 13.8383C3.03511 15.1722 3.80995 16.3763 4.83244 17.3499C5.85493 18.3235 7.09542 19.0385 8.45043 19.4352C9.80544 19.8319 11.2357 19.8988 12.6218 19.6303C14.0079 19.3618 15.3097 18.7657 16.4186 17.8918L20.2228 21.696C20.4193 21.8857 20.6824 21.9907 20.9555 21.9884C21.2286 21.986 21.4899 21.8764 21.683 21.6833C21.8762 21.4902 21.9857 21.2289 21.9881 20.9558C21.9905 20.6827 21.8855 20.4195 21.6957 20.2231L17.8916 16.4189C18.9207 15.1133 19.5615 13.5443 19.7406 11.8915C19.9197 10.2388 19.6299 8.56893 18.9043 7.07318C18.1787 5.57742 17.0467 4.31616 15.6377 3.43374C14.2288 2.55132 12.5999 2.08338 10.9374 2.0835ZM4.16656 10.9377C4.16656 9.14193 4.87992 7.41974 6.1497 6.14996C7.41947 4.88018 9.14166 4.16683 10.9374 4.16683C12.7331 4.16683 14.4553 4.88018 15.7251 6.14996C16.9949 7.41974 17.7082 9.14193 17.7082 10.9377C17.7082 12.7334 16.9949 14.4556 15.7251 15.7254C14.4553 16.9951 12.7331 17.7085 10.9374 17.7085C9.14166 17.7085 7.41947 16.9951 6.1497 15.7254C4.87992 14.4556 4.16656 12.7334 4.16656 10.9377Z" fill="current"/>
</svg>

 

width, height, fill을 찾아서 변경하고 싶은 요소에 current를 지정한다

• fill은 svg 박스 말고 path에 있는 fill에 바꿔야 한다

 

📍 svg 컴포넌트 사용하기

이제 이런 식으로 사용하면 된다!

import { SearchLine } from '@/public/icons';
import Link from 'next/link';

const SearchButton = () => {
  return (
    <Link href={'/search'}>
      <SearchLine width={20} height={20} fill="#000" />
    </Link>
  );
};

export default SearchButton;