https://github.com/afnizarnur/nataicons
A fun-themed simple open source icon by the folks at Natatoko
https://github.com/afnizarnur/nataicons
components icons react svg svg-sprites vue
Last synced: 8 months ago
JSON representation
A fun-themed simple open source icon by the folks at Natatoko
- Host: GitHub
- URL: https://github.com/afnizarnur/nataicons
- Owner: afnizarnur
- License: mit
- Created: 2020-10-11T14:34:58.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T22:58:02.000Z (about 1 year ago)
- Last Synced: 2025-02-21T10:03:20.934Z (8 months ago)
- Topics: components, icons, react, svg, svg-sprites, vue
- Language: JavaScript
- Homepage:
- Size: 1.25 MB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Nataicons
A fun-themed simple open source icon by the folks at Natatoko.
---
## Installation
Install with npm
```bash
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.
```html
```
### SVG Sprite
Include an icon on your page with the following markup:
```html
```
### Vue
1. Install with npm
```bash
npm install @nataicons/vue
```
2. Import the icon components
```js
import { AlarmIcon, AlertIcon, NataIcon } from "nataicons/vue"
```
3. Use the icon components in your template
```jsx
import { AlarmIcon } from "nataicons/vue"
export default {
components: { AlarmIcon }
}
```
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
```bash
npm install @nataicons/react
```
2. Import the icon components
```jsx
import { AlarmIcon, NataIcon } from "@nataicons/react"
```
3. Use the icon components in your JSX
```jsx
function MyComponent() {
return (
)
}
```
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](https://github.com/matschik/vue-hero-icons)
2. [radix-icons](https://github.com/modulz/radix-icons)
3. [heroicons](https://github.com/tailwindlabs/heroicons)
## License
Nataicons is licensed under the [MIT License](https://github.com/afnizarnur/nataicons//tree/main/LICENSE). In short, you are free to use this icons in any personal, open-source or commercial work. Attribution is optional but appreciated.