nataicons

Nataicons

ไอคอนโอเพนซอร์สที่เรียบง่ายในธีมที่สนุกสนานโดยคนที่นาตาโตโก

---

การติดตั้ง

ติดตั้งด้วย NPM

npm install nataicons

การใช้งาน

แบบอินไลน์

คัดลอก SVG ที่คุณต้องการใช้จาก icons/24x24 หรือ icons/20x20 ภายใน node_modules/nataicons และอินไลน์ใน 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

รวมไอคอนในหน้าของคุณด้วยมาร์กอัปต่อไปนี้:

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

ความเต็ม

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 ในระยะสั้นคุณมีอิสระที่จะใช้ไอคอนนี้ในงานส่วนตัวโอเพนซอร์ซหรืองานเชิงพาณิชย์ การระบุแหล่งที่มาเป็นทางเลือก แต่ชื่นชม