nataicons

納塔尼斯

Natatoko的人們以有趣的簡單開源圖標為主題。

---

安裝

使用NPM安裝

npm install nataicons

用法

排隊

複製您要在node_modules/nataicons中使用icons/24x24 icons/20x20中使用的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

1. 使用NPM安裝

npm install @nataicons/vue

2. 導入圖標組件

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

3. 使用模板中的圖標組件

 < 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道具使您可以更改圖標顏色。

反應

1. 使用NPM安裝

npm install @nataicons/react

2. 導入圖標組件

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

3. 使用JSX中的圖標組件

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

與VUE相似，您可以設置自定義size （以像素為單位）或使用默認大小。 color道具使您可以更改圖標顏色。

靈感

1. Vue-Hero-Icons
2. radix-icons
3. 英雄

執照

Nataicons已獲得MIT許可證的許可。簡而言之，您可以自由在任何個人，開源或商業作品中使用這些圖標。歸因是可選的，但值得讚賞。