@composite/iconify-krds

한국정부디자인시스템(KRDS)의 아이콘을 Iconify로 사용할 수 있게 제공하는 패키지.

설치 방법

npm install @ukjinplant/iconify-krds
yarn add @ukjinplant/iconify-krds
pnpm add @ukjinplant/iconify-krds

사용 방법 (표준 Web Components 기준)

일반 HTML 외에 Vue, Svelte 등의 프론트엔드 내 웹 컴포넌트 호환 가능 시 사용 가능.

Iconify 스크립트 추가:

기본 설치 방법은 Web components 환경 공식 문서 참조.

패키지 방식 사용 시 초기 세팅 (Vue, Svelte 등 프론트엔드 기반)

import { addCollection } from 'iconify-icon';
import { icons as krdsIcons } from '@iconify-json/krds';

addCollection(krdsIcons);

일반 HTML 페이지 사용 시 초기 세팅

<script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script>
<script>
const IconifyIcon = window.customElements.get("iconify-icon");
// 인터넷 접속 제한 사이트일 경우 아래 JSON을 다운로드 받아 별도 폴더에 저장하여 사용 가능.
fetch('https://cdn.jsdelivr.net/npm/@ukjinplant/iconify-krds@1.0.0/icons.json')
  .then(res => res.json())
  .then(icons => IconifyIcon.addCollection(icons))
  .catch(console.warn);
</script>

아이콘 사용 예시:

<!-- 'ico_all' 아이콘 사용 -->
<iconify-icon icon="krds:ico_all"></iconify-icon>

사용 방법 (React 기준)

초기 세팅 시 Iconify 라이브러리와 함께 사용:

import { addCollection } from '@iconify-icon/react';
import { icons } from '@ukjinplant/iconify-krds';

// 아이콘 컬렉션 추가
addCollection(icons);

아이콘 사용 예시:

import * as React from 'react';
import { Icon } from '@iconify-icon/react';

// 'ico_all' 아이콘 사용
<Icon icon="krds:ico_all" />

포함된 아이콘 목록

• HTML Component Kit의 아이콘 폴더 참조
• 상기 SVG 파일명(확장자 제외)을 아이콘 키워드 그대로 사용.

라이센스

Apache License 2.0 라이센스.

버그 신고 및 제안

버그 리포트나 기능 제안은 GitHub Issues로.

TODO

• Tree-shaking: 개별 아이콘 사용(특히 프론트엔드 기술 병행 사용에 유용)
• KRDS 커뮤니티 연계

연관 프로젝트

• 한국정부디자인시스템(KRDS): 기반 표준 아이콘
• Iconify: 범용 프론트엔드 아이콘 라이브러리
• @krds-ui/icon: React 전용 아이콘 세트