Web 1.0 Components

Icon Data

Icons

W1C ships one icon set as TypeScript data. The icons are inline SVG paths, so they do not need a network request or static asset loading.

import '@w1c/components/icon';
import { W1C_ICON_LICENSE_REVIEW, W1C_ICON_METADATA, W1C_ICON_NAMES, W1C_ICONS } from '@w1c/components/icons';
import type { IconData } from '@w1c/components/icons';

const folder: IconData = W1C_ICONS.folder;
const names = W1C_ICON_NAMES;
const source = W1C_ICON_METADATA.folder.sourceReferenceProject;
const review = W1C_ICON_LICENSE_REVIEW.status;
<w1c-icon name="folder" label="Folder"></w1c-icon>

Icon data

IconData matches the practical shape used by Iconify-style icon data:

type IconData = {
	body: string;
	width?: number;
	height?: number;
	left?: number;
	top?: number;
	rotate?: number;
	hFlip?: boolean;
	vFlip?: boolean;
};

Use package-provided data or trusted local data. Do not pass user-authored SVG strings into w1c-icon.

body contains the inner SVG markup, not the outer <svg> element. It may include multiple children, such as several <path> elements.

Set width, height, left, or top when the source icon uses a viewBox other than 0 0 16 16.

Bundled icons with source-specific viewBoxes:

  • danger: 0 0 24 24
  • globe: 0 0 24 24
  • pdf: 0 0 15 15
  • web-browser: 0 0 24 24

Metadata

Each bundled icon has metadata for:

  • name
  • category
  • source/reference project
  • source icon name
  • source URL
  • license
  • attribution text
  • intended size

The bundled W1C icon set is normalized as package SVG data. Windows-style icons come from Wikimedia Commons Microsoft icon references. Some neutral interface symbols reference Bootstrap Icons.

Sources

  • Wikimedia Commons Microsoft icon references: mixed per-file licenses.
  • Bootstrap Icons: MIT.

The Icon Catalog lists source and license attribution for each bundled icon.

Asset Paths

Inline W1C icons do not need asset paths. Copied assets do: external icon files, SVG sprite sheets, tiled backgrounds, and images need predictable URLs in static HTML, CDN, Vite, SvelteKit, and server-rendered pages.

Configure those paths once:

import { resolveW1cAssetUrl, setW1cAssetBasePaths } from '@w1c/components/assets';

setW1cAssetBasePaths({ icons: '/assets/w1c/icons', sprites: '/assets/w1c/sprites', images: '/assets/w1c/images' });

const folderUrl = resolveW1cAssetUrl('icons', 'folder.svg');
const spriteUrl = resolveW1cAssetUrl('sprites', 'system.svg#close');
const tileUrl = resolveW1cAssetUrl('images', 'tiles/stars.gif');

resolveW1cAssetUrl leaves absolute URLs, root-relative URLs, data URLs, and fragment-only URLs alone. Relative paths are joined to the configured base path for their asset kind.

Styling

w1c-icon exposes part="icon" on its SVG. Size and color use CSS custom properties:

w1c-icon::part(icon) {
	image-rendering: pixelated;
}

w1c-icon {
	--w1c-icon-size: 16px;
	--w1c-icon-color: currentColor;
}