Elemen Dasar
Icon (Ikon Grafis)
Panduan ukuran dan pewarisan warna ikon grafis antarmuka.
Majalengka Design System menggunakan pustaka ikon Lucide (i-lucide-*) dengan standarisasi ukuran hierarkis yang mewarisi warna teks induk (currentColor).
Pratinjau Komponen
Tabel Ukuran
| Ukuran | Dimensi | Peruntukan |
|---|---|---|
xs | 14×14 px | Teks keterangan mikro, badge kecil |
sm | 16×16 px | Tombol kecil (sm), kolom input |
md | 20×20 px | Standar tombol (md), navigasi |
lg | 24×24 px | Aksi utama, header kartu |
xl | 32×32 px | Empty state, dialog informasi |
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<span class="mjl-icon mjl-icon--md" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
<script setup lang="ts">
import { MjlIcon } from '@majalengka/vue';
</script>
<template>
<MjlIcon size="lg">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
</MjlIcon>
</template>
import type { ReactNode } from 'react';
export function MjlIcon({ size = 'md', children }: { size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; children: ReactNode }) {
return <span className={`mjl-icon mjl-icon--${size}`} aria-hidden="true">{children}</span>;
}
// Pemakaian (mis. dengan lucide-react): <MjlIcon size="lg"><ShieldCheck /></MjlIcon>
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-icon',
standalone: true,
template: `<span class="mjl-icon mjl-icon--{{ size() }}" aria-hidden="true"><ng-content /></span>`,
})
export class MjlIcon {
size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');
}
{{-- resources/views/components/mjl/icon.blade.php --}}
@props(['size' => 'md'])
<span {{ $attributes->class("mjl-icon mjl-icon--{$size}") }} aria-hidden="true">{{ $slot }}</span>
{{-- Pemakaian (mis. dengan blade-lucide-icons) --}}
<x-mjl.icon size="lg"><x-lucide-shield-check /></x-mjl.icon>
<span class="mjl-icon mjl-icon--lg" aria-hidden="true">
<?php readfile(__DIR__ . '/ikon/shield-check.svg'); ?>
</span>