Icons

import { component$ } from '@builder.io/qwik';
import { SfIconHome } from 'qwik-storefront-ui';

export default component$(() => {
  return (
    <div class="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 { component$ } from '@builder.io/qwik';
import { SfIconThumbUp } from 'qwik-storefront-ui';

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

import { component$ } from '@builder.io/qwik';
import { SfIconBase } from 'qwik-storefront-ui';

export default component$(() => {
  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>
  );
});