Skip to content

A fun-themed simple open source icon by the folks at Natatoko

License

Notifications You must be signed in to change notification settings

afnizarnur/nataicons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4603839 · Sep 4, 2024

History

60 Commits
Nov 18, 2020
Sep 3, 2024
Sep 4, 2024
Sep 4, 2024
Sep 4, 2024
Sep 3, 2024
Sep 4, 2024
Oct 19, 2020
Nov 12, 2020
Sep 4, 2024
Oct 14, 2020
Sep 3, 2024
Sep 3, 2024
Sep 4, 2024
Sep 4, 2024
Sep 4, 2024
Sep 4, 2024
Sep 4, 2024
Sep 4, 2024
Sep 4, 2024

Repository files navigation

Nataicons

A fun-themed simple open source icon by the folks at Natatoko.


Installation

Install with npm

npm install nataicons

Usage

Inline

Copy the SVGs you want to use from icons/24x24 or icons/20x20 inside node_modules/nataicons and inline them in your 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

Include an icon on your page with the following markup:

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

Vue

  1. Install with npm
npm install @nataicons/vue
  1. Import the icon components
import { AlarmIcon, AlertIcon, NataIcon } from "nataicons/vue"
  1. Use the icon components in your template
<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>

You can set a custom size (in pixels) or use the default sizes (24px or 20px). The color prop allows you to change the icon color.

React

  1. Install with npm
npm install @nataicons/react
  1. Import the icon components
import { AlarmIcon, NataIcon } from "@nataicons/react"
  1. Use the icon components in your JSX
function MyComponent() {
  return (
    <div>
      <AlarmIcon color="red" size={24} />
      <NataIcon name="bell" color="blue" size={32} />
    </div>  
  )
}

Similar to Vue, you can set a custom size (in pixels) or use the default sizes. The color prop allows you to change the icon color.

Inspiration

  1. vue-hero-icons
  2. radix-icons
  3. heroicons

License

Nataicons is licensed under the MIT License. In short, you are free to use this icons in any personal, open-source or commercial work. Attribution is optional but appreciated.