nataicons

Nataicons

Um ícone de código aberto simples com tema divertido do pessoal de Natatoko.

---

Instalação

Instale com o NPM

npm install nataicons

Uso

Em linha

Copie os SVGs que você deseja usar nos icons/24x24 ou icons/20x20 dentro de node_modules/nataicons e embutre -os no seu 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 Sprite

Inclua um ícone na sua página com a seguinte marcação:

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

Vue

1. Instale com o NPM

npm install @nataicons/vue

2. Importar os componentes do ícone

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

3. Use os componentes do ícone em seu modelo

 < 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>

Você pode definir um size personalizado (em pixels) ou usar os tamanhos padrão (24px ou 20px). O suporte color permite alterar a cor do ícone.

Reagir

1. Instale com o NPM

npm install @nataicons/react

2. Importar os componentes do ícone

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

3. Use os componentes do ícone em seu JSX

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

Semelhante ao Vue, você pode definir um size personalizado (em pixels) ou usar os tamanhos padrão. O suporte color permite alterar a cor do ícone.

Inspiração

1. Vue-herói-icons
2. Radix-icons
3. heróicons

Licença

O Nataicons está licenciado sob a licença do MIT. Em resumo, você é livre para usar esses ícones em qualquer trabalho pessoal, de código aberto ou comercial. A atribuição é opcional, mas apreciada.