Dokumentasi Instalasi

1 Instalasi (Via CDN)

Cukup salin tag <link> berikut dan letakkan di dalam blok <head> pada file HTML Anda.

CDN CSS (Rekomendasi Web)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/amrunamv/nusaicon@main/nusaicons.css">

Atau, jika Anda membutuhkan NusaIcons dalam format JavaScript (ES Module) untuk memanggil raw SVG:

CDN JavaScript (ESM)

<script type="module">
  import { getSvg } from "https://cdn.jsdelivr.net/npm/nusaicons@1.0.2/dist/index.esm.js";
</script>

2 Cara Penggunaan

Gunakan tag <i> dengan class icon-{nama-ikon}. Ikon otomatis menyesuaikan ukuran font induknya (1em).

Contoh Pemasangan:

<button> <i class="icon-download"></i> Unduh Data </button>

3 Mewarnai & Kustomisasi

NusaIcons menggunakan trik **CSS Masking**, yang artinya ikon akan menyerap warna color teks di sekitarnya. Anda bisa langsung mewarnainya dengan utilitas teks biasa!

Tailwind CSS

<i class="icon-heart text-rose-500 text-3xl"></i>

CSS Biasa

.icon-heart {
  color: #f43f5e;
  font-size: 30px;
}

4 Instalasi Via NPM & Penggunaan Node.js

Selain CDN, Anda dapat menginstal NusaIcons melalui NPM atau Yarn untuk proyek modern.

npm install nusaicons

CommonJS / ES Modules

import { getSvg, getIcon } from 'nusaicons';

// Mendapatkan SVG String
const svg = getSvg('home', { size: 24, color: '#4f46e5' });

// Mendapatkan Data Ikon
const data = getIcon('home');

5 Integrasi Framework Modern

NusaIcons dirancang kompatibel dengan framework JavaScript seperti React, Next.js, dan Vue 3. Anda cukup mengimport fungsi getSvg().

React / Next.js

import { getSvg } from 'nusaicons';

function MyButton() {
  return (
    <button>
      <span dangerouslySetInnerHTML={{ __html: getSvg('download') }} />
      Unduh
    </button>
  );
}

Vue 3

<template>
  <button>
    <span v-html="iconHtml" />
    Unduh
  </button>
</template>

<script setup>
import { getSvg } from 'nusaicons';
const iconHtml = getSvg('download');
</script>

6 Referensi API Lengkap

Berikut adalah referensi fungsi JavaScript (NPM) yang tersedia dari pustaka nusaicons.

Fungsi / Properti	Deskripsi
getSvg(name, options?)	Mengembalikan tag HTML SVG string. `options` berisi `{size, color, strokeWidth, className}`.
getIcon(name)	Mengembalikan objek data ikon `{name, category, path}`.
getByCategory(cat)	Mengembalikan array ikon berdasarkan string kategori.
icons	Array berisi seluruh data ikon (38+ ikon).
iconNames	Array berisi seluruh string nama ikon.

7 Integrasi Mobile (Flutter)

Selain Web, NusaIcons juga menyediakan auto-generated Dart File untuk developer Flutter. Unduh file nusa_icons.dart dari repositori kami dan gunakan package flutter_svg.

Contoh di Flutter (Dart)

import 'package:flutter_svg/flutter_svg.dart';
import 'nusa_icons.dart'; // file dari dist/nusa_icons.dart

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SvgPicture.string(
      NusaIcons.home, // Menggunakan camelCase: home, arrowLeft, dsb.
      width: 24,
      height: 24,
      colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
    );
  }
}

Dokumentasi Instalasi Lengkap