nataicons 다운로드 nataicons 소스 코드 다운로드

nataicons

타사 구성 요소

3.0.1

다운로드

Nataicons

Natatoko의 사람들이 재미있는 간단한 오픈 소스 아이콘.

설치

NPM으로 설치하십시오

npm install nataicons

용법

인라인

icons/24x24 또는 icons/20x20 node_modules/nataicons 에서 사용하려는 SVG를 복사하여 HTML에 인화하십시오.

 < svg xmlns =" http://www.w3.org/2000/svg " width =" 24 " height =" 24 " fill =" none " viewBox =" 0 0 24 24 " >
  < path stroke =" currentColor " stroke-linecap =" round " stroke-linejoin =" round " stroke-width =" 2 " d =" M3.5 14l8.515-11v6.5H21L12.015 21v-7H3.5z " />
</ svg >

SVG 스프라이트

다음 마크 업이있는 페이지에 아이콘을 포함시킵니다.

 < svg width =" 24 " height =" 24 " class =" custom-class " >
  < use xlink:href =" #24x24--alarm " > </ use >
</ svg >

vue

NPM으로 설치하십시오

npm install @nataicons/vue

아이콘 구성 요소를 가져옵니다

 import { AlarmIcon , AlertIcon , NataIcon } from "nataicons/vue"

템플릿의 아이콘 구성 요소를 사용하십시오

 < template >
  < div >
    < AlarmIcon color = "red" size = "24" />
    < NataIcon name = "bell" color = "blue" size = "32" />
  </ div >
</ template >
< script >
  import { AlarmIcon } from "nataicons/vue"
    export default {
    components : { AlarmIcon }
  }
< / script>

사용자 정의 size (픽셀)를 설정하거나 기본 크기 (24px 또는 20px)를 사용할 수 있습니다. color 소품을 사용하면 아이콘 색상을 변경할 수 있습니다.

반응

NPM으로 설치하십시오

npm install @nataicons/react

아이콘 구성 요소를 가져옵니다

 import { AlarmIcon , NataIcon } from "@nataicons/react"

JSX에서 아이콘 구성 요소를 사용하십시오

 function MyComponent ( ) {
  return (
    < div >
      < AlarmIcon color = "red" size = { 24 } />
      < NataIcon name = "bell" color = "blue" size = { 32 } />
    </ div >  
  )
}