Skip to main content
Slatico logo
Monorepo Release Notice (v0.1.0 · Workspace Monorepo Release): Packages are verified in the open-source Slatico monorepo CI pipeline and prepared for upcoming public registry publishing (npm, pub.dev, Maven Central, and Swift Package Index). Clone github.com/infitusofficial/slatico to consume packages via workspace or local path today.
@slatico/svg · @slatico/web · @slatico/font · v0.1.0

Vanilla HTML, SVG, Web Components & Icon Font Guide

Use Slatico in any web stack without React or Vue using @slatico/svg (programmatic inline SVG & sprite sheets), @slatico/web (Shadow DOM <slatico-icon> Custom Elements), or @slatico/font (WOFF2/WOFF/TTF monochrome webfonts).

1. Installation

Terminal (npm / pnpm / yarn)
# Install the package(s) matching your architecture:
npm install @slatico/svg @slatico/web @slatico/font
# or
pnpm add @slatico/svg @slatico/web @slatico/font
# or
yarn add @slatico/svg @slatico/web @slatico/font

2. HTML / Programmatic SVG (@slatico/svg)

Render accessible, instance-scoped SVG markup in Node.js, Astro, Laravel, PHP, WordPress, or vanilla TypeScript:

render-svg.ts
import { renderSvgMarkup, getSvgAsset, getSvgSprite } from "@slatico/svg";

// 1. Regular monochrome icon (defaults to size=24, color="currentColor")
const regularSvg = renderSvgMarkup("bell", "regular", {
  size: 24,
  color: "#010520",
  title: "Notifications"
});

// 2. Duotone icon with custom primary color, secondaryColor & secondaryOpacity
const duotoneSvg = renderSvgMarkup("shield-check", "duotone", {
  size: 28,
  color: "#010520",
  secondaryColor: "#FF6040",
  secondaryOpacity: 0.25,
  title: "Security Verified"
});

// 3. Color icon with default palette (#FF6040 + #000000) or two custom colors
const colorSvg = renderSvgMarkup("wallet", "color", {
  size: 32,
  color: "#FF6040",
  secondaryColor: "#010520",
  title: "Wallet"
});

// 4. Raw SVG asset & complete style sprite sheet
const asset = getSvgAsset("arrow-up-right", "bold");
const spriteSheet = getSvgSprite("regular");
Option (RenderSvgOptions)TypeDefaultDescription
sizenumber | string24Width and height attributes on the root <svg> element.
colorstring"currentColor"Primary color (color for monochrome/Duotone; --slatico-primary-color for color style).
secondaryColorstringundefinedSets --slatico-secondary-color for duotone and color icons.
secondaryOpacitynumber | string0.2 (in SVG)Sets --slatico-secondary-opacity for duotone icons.
titlestringundefinedAccessible label (role="img" + aria-label + <title>).
className / idPrefixstringundefinedOptional CSS class name(s) and unique SVG internal ID suffix.

3. Web Components (@slatico/web)

Register only the icons your page needs with registerSlaticoIcons and render the standards-compliant <slatico-icon> custom element anywhere in HTML, Svelte, Angular, or Lit:

index.html
<script type="module">
  import { defineSlaticoIconElement, registerSlaticoIcons } from "@slatico/web";
  import { bellIconDef } from "@slatico/web/icons/bell";
  import { shieldCheckIconDef } from "@slatico/web/icons/shield-check";
  import { walletIconDef } from "@slatico/web/icons/wallet";

  registerSlaticoIcons(bellIconDef, shieldCheckIconDef, walletIconDef);
  defineSlaticoIconElement();
</script>

<!-- 1. Monochrome icon (decorative, aria-hidden="true") -->
<slatico-icon name="bell" variant="regular" size="24" color="#010520"></slatico-icon>

<!-- 2. Duotone icon with custom primary + secondary-color + secondary-opacity -->
<slatico-icon
  name="shield-check"
  variant="duotone"
  size="28"
  color="#010520"
  secondary-color="#FF6040"
  secondary-opacity="0.25"
  label="Security Verified"
></slatico-icon>

<!-- 3. Color icon with two customizable colors (color + secondary-color) -->
<slatico-icon
  name="wallet"
  variant="color"
  size="28"
  color="#FF6040"
  secondary-color="#010520"
  label="Wallet"
></slatico-icon>
Attribute (<slatico-icon>)TypeDefaultDescription
nameSlaticoIconNamerequiredCanonical kebab-case icon slug (e.g. "bell", "arrow-up-right").
variantSlaticoStyle"regular"Style variant (thin, light, regular, bold, fill, duotone, color).
sizenumber | string"24"Pixel size ("24") or CSS length ("1.5rem").
colorstring"currentColor"Primary color or --slatico-primary-color override for color icons.
secondary-colorstringundefinedSecondary layer color (--slatico-secondary-color) for duotone and color icons.
secondary-opacitynumber | string0.2 (in SVG)Secondary layer opacity (--slatico-secondary-opacity) for duotone icons.
labelstringundefinedAccessible label (role="img" + aria-label). When omitted, sets aria-hidden="true".

4. Monochrome Webfont (@slatico/font)

The 5 monochrome styles (thin, light, regular, bold, fill — 135 glyphs total) are compiled into WOFF2, WOFF, and TTF font families using the class pattern slatico slatico-<name>-<style>:

webfont-example.html
<link rel="stylesheet" href="/node_modules/@slatico/font/dist/slatico.css" />

<!-- Decorative monochrome font icons (class="slatico slatico-<name>-<style>") -->
<i class="slatico slatico-bell-regular" style="font-size: 24px; color: #010520;" aria-hidden="true"></i>
<i class="slatico slatico-house-bold" style="font-size: 28px; color: #FF6040;" aria-hidden="true"></i>
<i class="slatico slatico-arrow-up-right-fill" style="font-size: 24px;" aria-hidden="true"></i>

<!-- Accessible monochrome font icon -->
<i class="slatico slatico-shield-check-regular" role="img" aria-label="Security Verified"></i>