heroicons Download- heroicons 소스 코드 다운로드

heroicons

기타 소스코드

v2.2.0

다운로드

Tailwind CSS 제조업체의 아름다운 손으로 만들어진 SVG 아이콘.
기본 SVG 아이콘 및 1 자 반응 및 VUE 라이브러리를 통해 제공됩니다.

Heroicons.com →에서 찾아보십시오

기본 사용

이 아이콘을 사용하는 가장 빠른 방법은 Heroicons.com에서 필요한 아이콘의 소스를 간단히 복사하여 HTML에 직접 내리는 것입니다.

 <SVG
  class = "size-6 text-gray-500"fill = "none"viewbox = "0 0 24 24"stroke = "currentColor"Stroke-width = "2">
  <pathstroke-linecap = "round"stroke-linejoin = "round"d = "m12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0118 0z"
  /> </svg>

두 아이콘 스타일은 color CSS 속성을 수동으로 설정하거나 Tailwind CSS와 같은 프레임 워크에서 text-gray-500 과 같은 유틸리티 클래스를 사용하여 양식화 할 수 있도록 미리 구성됩니다.

반응

먼저 NPM에서 @heroicons/react 설치하십시오.

 npm @heroicons/react install

이제 각 아이콘을 React 구성 요소로 개별적으로 가져올 수 있습니다.

 '@heroicons/react/24/solid'function mycomponent () {에서 {beakericon} 가져 오기
  return (<div> <beakericon classname = "size-6 text-blue-500"/> <p> ... </p> </div>
  )}

24x24 개요 아이콘은 @heroicons/react/24/outline 에서 가져올 수 있습니다. 24x24 솔리드 아이콘은 @ @heroicons/react/24/solid @heroicons/react/20/solid 에서 가져올 수 있습니다. 및 16x16 솔리드 아이콘은 @heroicons/react/16/solid 에서 가져올 수 있습니다.

아이콘은 상단 낙타 케이스 명명 규칙을 사용하며 항상 단어 Icon 으로 접미사됩니다.

unpkg →에서 아이콘 이름의 전체 목록을 찾아보세요.

vue

먼저 NPM에서 @heroicons/vue 설치하십시오.

 npm @heroicons/vue install

이제 각 아이콘을 VUE 구성 요소로 개별적으로 가져올 수 있습니다.

 <emplate>
  <div>
    <beakericon class = "size-6 text-blue-500" />
    <p> ... </p>
  </div>
</template> <스크립트 설정> import {beakericon}에서 '@heroicons/vue/24/solid'</script>

24x24 개요 아이콘은 @heroicons/vue/24/outline @heroicons/vue/24/solid 가져올 수 있습니다. 24x24 솔리드 아이콘은 @heroicons/vue/20/solid 에서 가져올 수 있습니다. 및 16x16 솔리드 아이콘은 @heroicons/vue/16/solid 에서 가져올 수 있습니다.

아이콘은 상단 낙타 케이스 명명 규칙을 사용하며 항상 단어 Icon 으로 접미사됩니다.

unpkg →에서 아이콘 이름의 전체 목록을 찾아보세요.

기여

우리는 프로젝트를 시도하고 개선하려는 모든 사람의 의지에 대해 절대적으로 감사하지만 현재는 버그를 고치는 기여에만 관심이 있습니다 (예 : 잘못된 타입 스크립트 유형과 같은 것들 또는 스트로크 대신 필로 내보내는 아이콘을 수정하는 것).

우리는 새로운 아이콘에 대한 기여를 받아들이거나 Svelte 또는 Solidjs와 같은 다른 프레임 워크에 대한 지원을 추가하지 않습니다 . 대신 우리는 자신의 아이콘을 자신의 라이브러리에서 공개하고 지원되는 다른 프레임 워크에 대한 자신의 패키지를 만들 것을 권장합니다.