@orvain/assets

The multi-colour artwork of the Orvain Design System, kept apart from the one-colour icons in @orvain/icons:

| Kind | Count | Names | Source | |---|---|---|---| | Brand logos | 354 | google, card-visa, twitter-x, … | Figma Brand page (all 351 logos), plus revolut, andreno and instagram-mono | | Country flags | 250 | every ISO 3166-1 alpha-2 code (us, br, …) plus eu | 13 from Figma "Rounded Flags", the rest from circle-flags (MIT) | | Emoji | 9 | red-heart, grinning, … | vector redraws (Figma has emoji only as raster images) | | File-type badges | 1 | fig | | | Illustrations | 135 | search-filled-floor, locked-brand-grid, … | Figma "Illustration/…" sets (20 × Style Filled/Outlined/Brand × Background Floor/Grid), plus 5 earlier sets with variants A, B, C (success-a, …) |

Commercial software. See LICENSE; third-party notices in NOTICE.

Usage

Most people render assets through @orvain/react or @orvain/vue:

import { Asset, Flag, Logo, Emoji } from '@orvain/react';
import { logoGoogle } from '@orvain/assets';

<Asset asset={logoGoogle} size={24} />      {/* synchronous; only this logo is bundled */}
<Logo name="google" size={24} />            {/* by name; only this logo is downloaded, on first render */}
<Flag code="us" size={20} label="United States" />
<Emoji name="red-heart" size={16} />

size is the height in px; the width follows the artwork. Pass width and height together for a fixed box (the artwork is centred inside it).

| Export | What it is | |---|---| | logoGoogle, flagUs, emojiRedHeart, fileTypeFig, illustrationSearchFilledFloor, … | one AssetDefinition per asset ({ name, label, viewBox, width, height, body }). Only the ones you import are bundled. | | logoNames, flagNames, emojiNames, fileTypeNames, illustrationNames | every name of a kind | | LogoName, FlagCode, EmojiName, FileTypeName, IllustrationName | string-literal unions of those names | | logoLabels, flagLabels, … | human names (Google Maps, United States) | | logoLoaders, flagLoaders, … | () => import(…) per asset: rendering by name downloads just that file | | logoCategories | the Figma Brand page grouping (Banking & Finance, Browsers, …) | | illustrationAliases | retired illustration names (no-results-a, …) and the current illustration each one renders; they still type-check and load | | isAssetDefinition, assetMarkup | tell an asset from an icon; the markup with per-instance ids |

The name lists, labels and loaders hold no artwork, so importing them costs a few kilobytes, not the whole set.

Accessibility

Assets carry no <title> or role. The components make them decorative (aria-hidden) unless they get a label (or aria-label / aria-labelledby), which turns them into role="img" with that name. Label an asset only when it carries meaning on its own: a flag next to the country name is decorative, a card logo with only "···· 4242" beside it is not.

Colour

Artwork keeps its own colours, so CSS color has no effect, with two exceptions: logos drawn in plain black only (Apple, X, OpenAI, …) use currentColor so they stay visible on dark surfaces, and the isometric empty-state illustrations (<set>-<filled|outlined|brand>-<floor|grid>) carry no colours at all. Each of their shapes has a role class (odsa-<fill|stroke|stop>-<role>, e.g. odsa-stroke-line) that <Illustration> paints with the color.illustration.* tokens, which alias system colour tokens, so they follow the theme (light and dark) and any brand re-colour. Render them with <Illustration>: drawn elsewhere they have no colour.

Adding assets (maintainers)

Put an optimised SVG (viewBox kept, explicit width and height) in src/<kind>/<name>.svg and its human name in src/<kind>/labels.json. Every id inside must start with odsa-<name>- so ids never collide; renderers make them unique per instance. scripts/gen-assets.mjs (run by pnpm build, or pnpm gen:assets) generates the per-asset modules and the registries into src/generated/ (gitignored) and fails on a bad name, a missing viewBox or a stray id.

Flags: node scripts/import-flags.mjs <circle-flags>/flags fills in every ISO 3166-1 alpha-2 code missing from src/flags/ from an unpacked copy of the circle-flags package (it keeps the Figma flags unless given --replace).