Material Symbols SVG를 만들었습니다, Material Symbols를 SVG 컴포넌트로 사용하는 아이콘 라이브러리

Source: Dev.to

지원되는 프레임워크

링크

• 문서 –
• 아이콘 카탈로그 –
• GitHub –

내가 만든 이유

Material Symbols를 원시 SVG 파일(예: @material-symbols/svg-400)로 사용하는 “공식‑에 가까운” 방법이 이미 있습니다.
React에서 이러한 아이콘을 컴포넌트로 사용할 때마다 @svgr/webpack 같은 추가 변환 레이어를 추가하거나 맞춤 빌드 단계를 작성해야 했습니다.

그 워크플로는 일회성 스크립트에는 괜찮지만, 일상적인 UI 작업에는 번거롭습니다.
내가 대신 원했던 것은:

• 추가 SVG 변환 단계 없음
• 아이콘을 렌더링하기 위해 프레임워크‑특정 webpack 설정이 필요 없음
• 이미 컴포넌트처럼 동작하는 직접 임포트
• 프레임워크 전반에 걸친 일관된 사고 모델

그래서 나는 Material Symbols를 처음부터 프레임워크 컴포넌트 형태로 제공하는 라이브러리를 만들었습니다.

라이브러리가 제공하는 것

• 3 800+ 아이콘
• 3가지 스타일 변형 – outlined, rounded, sharp
• 7가지 굵기 변형 – 100 – 700
• 채워진 변형
• 유사한 import 패턴을 가진 프레임워크 패키지

아이콘이 SVG 컴포넌트(아이콘 폰트가 아님) 형태로 배포되기 때문에 컴포넌트 기반 UI 코드에 자연스럽게 녹아듭니다. size, color, className/class, style 등 표준 SVG 속성을 사용해 제어할 수 있으며, 기타 SVG 속성도 사용할 수 있습니다.

React 예제

import { Home, Search } from "@material-symbols-svg/react";
import { Home as HomeRounded } from "@material-symbols-svg/react/rounded";
import { Home as HomeW500 } from "@material-symbols-svg/react/w500";

export function Example() {
  return (
    <>
      {/* Your JSX here */}
    </>
  );
}

기본 import는 outlined / w400입니다.

import { Home } from "@material-symbols-svg/react";          // outlined / w400
import { Home as HomeW600 } from "@material-symbols-svg/react/w600";
import { Home as HomeRounded } from "@material-symbols-svg/react/rounded";
import { Home as HomeSharpW700 } from "@material-symbols-svg/react/sharp/w700";

같은 import‑path 패턴이 Vue, Svelte, Astro, 그리고 React Native에 사용됩니다.

디자인 선택: import‑경로‑기반 변형

핵심 설계 결정 중 하나는 스타일과 굵기가 런타임 props가 아니라 import 경로를 통해 선택된다는 것입니다.

왜?

• Material Symbols는 런타임에 선 굵기를 변경할 수 있는 단순한 라인 아이콘이 아닙니다.
• 각 스타일(outlined, rounded, sharp)과 각 굵기(w100 … w700)는 고유한 SVG 경로 데이터를 가지고 있습니다.

만약 우리가 다음과 같은 prop‑기반 API를 제공한다면:

컴포넌트는 단일 모듈에 21개의 경로 변형(3 스타일 × 7 굵기)을 번들링해야 합니다. 이는 트리‑쉐이킹을 방해하고 번들 크기를 증가시킵니다.

변형을 별개의 import 경로로 분리함으로써:

@material-symbols-svg/react/w600
@material-symbols-svg/react/rounded/w400
@material-symbols-svg/react/sharp/w700

번들러는 명확한 모듈 그래프를 인식하여 사용되지 않은 변형을 쉽게 제거할 수 있습니다.

Deep Imports (icons/*)

특정 아이콘을 icons 하위 폴더에서 직접 가져올 수도 있습니다:

import { HomeW400, HomeFillW600 } from "@material-symbols-svg/react/icons/home";
import { SettingsW400 } from "@material-symbols-svg/react/rounded/icons/settings";

장점

• 정확한 아이콘이 import 경로에 명시됩니다.
• Filled 변형을 쉽게 지정할 수 있습니다.
• 일부 설정(예: Astro 5)에서는 깊은 가져오기를 사용하면 루트 import 시 발생할 수 있는 개발 서버 타임아웃을 방지할 수 있습니다.

컴포넌트 Props 및 속성

All components accept standard SVG‑oriented props:

Example

import { Home } from "@material-symbols-svg/react";

export function Example() {
  return (
    <Home size={24} color="currentColor" />
  );
}

접근성을 위한 “ 추가

  Home

렌더링 결과:

  
  Home

Tailwind CSS로 스타일링하기

아이콘이 일반 컴포넌트이기 때문에 Tailwind 유틸리티를 바로 사용할 수 있습니다:

import { Search } from "@material-symbols-svg/react";

export function SearchButton() {
  return (
    <button className="flex items-center gap-2">
      <Search className="w-5 h-5" />
      Search
    </button>
  );
}

Next.js 최적화

Next.js 프로젝트에서는 optimizePackageImports를 사용해 개발 시 동작을 개선할 수 있습니다:

// next.config.js
const nextConfig = {
  experimental: {
    optimizePackageImports: [
      "@material-symbols-svg/react",
      "@material-symbols-svg/react/rounded",
      "@material-symbols-svg/react/sharp",
    ],
  },
};

module.exports = nextConfig;

공식 문서:

Next.js는 이미 일부 라이브러리(lucide-react, react-icons/* 등)를 최적화하지만, @material-symbols-svg/react는 기본적으로 포함되지 않으므로 위와 같은 설정을 권장합니다.

요약

• 3 800+ 아이콘이 3가지 스타일과 7가지 굵기(플러드 포함)로 제공됩니다.
• 빌드 단계 없이 바로 변환 – 바로 사용할 수 있는 컴포넌트를 import 합니다.
• React, Vue, Svelte, Astro, React Native 전반에 걸친 일관된 API.
• 최소 번들 크기를 위한 트리‑쉐이킹 가능한 import‑path 설계.
• 전체 SVG prop 지원, Tailwind와 호환, 기본 제공 접근성.

직접 사용해 보고 아이콘‑폰트나 SVG‑loader 워크플로를 깔끔한 컴포넌트‑우선 경험으로 교체해 보세요!

Material Symbols SVG – 아이콘을 쉽게 탐색하고, 검사하고, 사용하기

대규모 아이콘 세트를 다룰 때 전용 탐색 도구가 있으면 큰 차이를 만들 수 있습니다. 저는 Material Symbols 컬렉션을 탐색하고 필요한 에셋을 빠르게 가져올 수 있는 사이트를 만들었습니다.

What the site offers

• 아이콘 이름으로 검색
• 스타일, 채우기, 두께, 크기 및 색상 비교
• 프레임워크별 import 스니펫 보기
• SVG를 직접 복사

Why it matters

수천 개의 아이콘을 다루는 것은 압도적일 수 있습니다. 이 도구는 일반적인 UI 아이콘이든 특수한 아이콘이든(예: 진공 관련 심볼) 정확히 필요한 것을 찾는 데 도움을 줍니다. 방대한 컬렉션 덕분에 존재조차 몰랐던 아이콘들을 계속 발견하게 됩니다. 제가 개인적으로 가장 좋아하는 아이콘은? 부엉이 아이콘입니다.

Goal

저는 Material Symbols가 추가 툴체인 단계가 필요한 원시 SVG 에셋이 아니라 일류 컴포넌트처럼 느껴지길 원했습니다.

Get started

• 문서 및 사용 가이드 –
• 전체 아이콘 카탈로그 –
• GitHub 저장소 –

사용해 보시고 피드백을 주시면 감사하겠습니다!