Icons

import { useState, createElement } from 'react';
import * as AllSfComponents from '@storefront-ui/react';
import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default function IconList() {
  const [copied, setCopied] = useState('');
  const { data: componentsNames = [] } = useSWR<string[]>(
    `${process.env.DOCS_EXAMPLES_REACT_PATH || ''}/api/getIcons`,
    fetcher,
  );

  const copyToClipboard = (componentName: string) => {
    navigator.clipboard.writeText(componentName);
    setCopied(componentName);
    setTimeout(() => {
      setCopied('');
    }, 1000);
  };

  return (
    <>
      {componentsNames.map((componentName) => (
        <button
          type="button"
          key={componentName}
          className="inline-block border cursor-pointer"
          data-tooltip={componentName}
          onClick={() => {
            copyToClipboard(componentName);
          }}
        >
          {createElement((AllSfComponents as Record<string, any>)[componentName])}
        </button>
      ))}

      {copied && <p className="mt-1 text-sm">&quot;{copied}&quot; has been copied to clipboard</p>}
    </>
  );
}

import { SfIconHome } from '@storefront-ui/react';

export default function IconSizesDemo() {
  return (
    <div className="flex flex-col flex-wrap sm:flex-row">
      <SfIconHome size="sm" />
      <SfIconHome />
      <SfIconHome size="lg" />
      <SfIconHome size="xl" />
      <SfIconHome size="2xl" />
      <SfIconHome size="3xl" />
      <SfIconHome size="4xl" />
    </div>
  );
}

import { SfIconThumbUp } from '@storefront-ui/react';

export default function IconColors() {
  return (
    <>
      <SfIconThumbUp className="text-red-600" />
      <SfIconThumbUp className="text-purple-500" />
      <SfIconThumbUp className="text-cyan-700" />
      <span className="text-gray-500">
        <SfIconThumbUp />
      </span>
    </>
  );
}

import { SfIconBase } from '@storefront-ui/react';

export default function CustomIcon() {
  return (
    <SfIconBase viewBox="0 0 24 24">
      <path d="M4 18a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2H4Zm0-5a1 1 0 1 1 0-2h16a1 1 0 1 1 0 2H4ZM3 7a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Z" />
    </SfIconBase>
  );
}