[Next.js] Navbar에 svg 추가, 반응형 추가 구현

 

 

 

next에 svg 사용하기 

 

---

 

svgr 설치

npm install @svgr/webpack

 

svgr 구성 : next.config.js

// next.config.js
module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });

    return config;
  },
};

 

아이콘 가져오기
https://www.svgrepo.com/

SVG Repo - Free SVG Vectors and Icons

import Icon from './icon.svg';

 

 

jsx 내부에서 사용하려면? (React와 유사)

import React from 'react';
import Icom from './components/icon.svg'

const MyComponent = () => {
  return (
    <div>
       <Icon width={100} height={100} />
    </div>
  );
};

export default MyComponent;

 

 

블로그 참고

[Next JS / React] SVG 사용법(svgr이 최선일까요?)

 

 

 

---

 

svg에서 a 태그 이동 적용 & 화면 작아질때 반응형 구현 

  <a href="https://www.kakaotalk.com" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
    <KakaotalkIcon className="md:h-6 md:w-6 sm:h-4 sm:w-4" />
  </a>

 

화면에서 보이는 사이즈 md로 조절, 더 작아질때는 sm으로 h,w 값을 조절하였다.