Iconen die laten zien wat ze doen.

React 18 of nieuwer, verder niets. De iconen zijn Server Components, je bundel krijgt alleen wat je importeert, en onder de MIT-licentie gebruik je ze vrij, ook commercieel.

1. Zet de stijlen in je layout

   Eén keer, in de root van je app. De tokens geven het accent de Struq-vlam, de motion-CSS laat elk icoon bewegen. Zonder de tokens volgt alles de tekstkleur.

   app/layout.tsx

   import "@struq/icons/tokens.css";
   import "@struq/icons/icons.css";

2. Gebruik een icoon

   Elk icoon is een named export. Zit het in een knop of link, dan beweegt het als je die aanwijst of met het toetsenbord kiest. Staat het icoon alleen, geef het dan een label.

   React

   import { Send, Search } from "@struq/icons";
   
   <button>
     <Send size={20} />
     Versturen
   </button>
   
   <button aria-label="Zoeken">
     <Search label="Zoeken" />
   </button>

3. Maak het van jou

   Geef één icoon zijn kleuren met props, of een hele zone met twee CSS-variabelen. Wil je rust op het scherm? states.css houdt elk icoon in één toon tot je ermee werkt.

   React en CSS

   <Search color="#221d15" accentColor="#e4572e" strokeWidth={1.75} />
   
   .sidebar {
     --icon-base: var(--text-muted);
     --icon-accent: var(--brand);
   }
   
   import "@struq/icons/states.css";

import { Inbox } from "@struq/icons";
import { StruqIconDraw } from "@struq/icons/draw";

<StruqIconDraw icon={Inbox} size={48} delay={0.2} />

<svg width="24" height="24" aria-hidden="true">
  <use href="/sprite.svg#search" />
</svg>