الاستخدام مع React

<script src="https://fzhub.tech/libs/fz-icons/0.1.0/fz-icons.js"></script>

export function CoffeeBadge() {
  return (
    <span>
      <fz-icon name="dallah" size="20"></fz-icon>
      قهوة
    </span>
  );
}

mkdir -p src/vendor/fz-icons
curl -o src/vendor/fz-icons/index.js https://fzhub.tech/libs/fz-icons/0.1.0/index.js
curl -o src/vendor/fz-icons/index.d.ts https://fzhub.tech/libs/fz-icons/0.1.0/index.d.ts

import { toSvg, type IconName } from './vendor/fz-icons/index.js';

interface FzIconProps {
  name: IconName;
  size?: number;
  strokeWidth?: number;
  title?: string;
}

const wrapper = { display: 'inline-flex', lineHeight: 0 };

export function FzIcon({ name, size = 24, strokeWidth = 2, title }: FzIconProps) {
  const svg = { __html: toSvg(name, { size, strokeWidth, title }) };
  return <span style={wrapper} dangerouslySetInnerHTML={svg} />;
}

<FzIcon name="palm" size={32} title="نخلة" />