Social icon
A line glyph for the networks a creator links from their profile: Instagram, X, Facebook, TikTok, YouTube, Telegram, a website.
Web — React, depuis @krizaka/orochia-design-system. L'app mobile Orochia prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.
Pourquoi il existe au-dessus de Krizaka UI
Brand glyphs are not in @krizaka/icons (the Krizaka signature set draws Krizaka's own concepts) and lucide no longer ships them. A creator's profile links to their other networks: this kit draws them once, in the same line weight as the interface, in currentColor.
Quand l’utiliser
- On a profile header, the links a creator added to their other networks.
- In the profile settings, next to each link field.
Quand ne pas l’utiliser
- For an interface icon (upload, settings, search): use @krizaka/icons.
- As a share or sign-in button of the network itself: the network's own button rules apply.
Installation
Installer
npm install @krizaka/orochia-design-system @krizaka/ui && npm install -D tailwindcss @krizaka/tailwindStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";
@import "@krizaka/orochia-design-system/theme.css";
@import "@krizaka/tokens/brands/orochia.css";Importer
import { SocialIcon } from "@krizaka/orochia-design-system";Exemples
A creator's links
The row of networks on a profile header, each one a named link.
An unknown network
A network without a glyph of its own draws the website globe.
Props
A line glyph for a network a creator links from their profile — decorative (aria-hidden): the link around it carries
the name (aria-label="Instagram").
| Prop | Type | Défaut | Description |
|---|---|---|---|
networkrequis | SocialNetwork | (string & {}) | — | The network of the link, as stored on the profile (instagram, x, tiktok…); an unknown one draws website. |
className | string | h-4 w-4 | Size and colour: the glyph strokes currentColor. Default h-4 w-4. |
Accessibilité
aria-hidden: the link around it carries the accessible name.- Strokes
currentColor: it follows the text role, in both themes.
Bonnes pratiques
- Always inside a link that names the network (
aria-label): the glyph is decorative. - Size and colour through
className(h-5 w-5 text-fg-secondary,hover:text-fg). - Pass the network as stored: an unknown one draws the website globe instead of nothing.
Composants liés
Généré depuis le code de @krizaka/orochia-design-system 4.1.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub