Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음

반응형

 

Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음

---

 

https://simpleicons.org/

---

• 웹페이지: https://simpleicons.org/
• github: https://github.com/simple-icons/simple-icons

주요 기능

• 약 2444개의 유명 회사 및 제품들 아이콘을 SVG로 제공
• SVG, PDF 확장자 선택해서 다운로드 가능
• 아이콘 클릭시 svg 인라인 코드 텍스트 복사됨

코드에서 사용할 때

• JSDelivr or Unpkg 과 같은 CDN으로 사용 가능
• npm 패키지로도 제공: simple-icons

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v8/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v8/icons/[ICON SLUG].svg" />

[ICON SLUG]는 slug 참고해서 치환하면 됨. 예를 들어

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v8/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v8/icons/simpleicons.svg" />

 

CDN with colors

CDN 서비스는 colors 기능도 있음.

<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]" />

여기서 [COLOR]는 option이며 사용하려는 아이콘의 hex colors 또는 CSS keywords로 대체할 수 있습니다. 색상은 기본적으로 simpleicons.org 웹사이트에 표시된 아이콘의 hex colors 으로 설정됩니다. 예를 들어

<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/gray" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/hotpink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf9" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff99" />

TypeScript에서 사용법

import type { SimpleIcon } from 'simple-icons';

 

 

참고

- https://news.hada.io/topic?id=8911

- https://github.com/simple-icons/simple-icons