Developer Documentation

Slatico Multi-Platform Architecture & SDK Overview

Slatico is a deterministic, open-source icon system created by Infitus Creative Studio. From a single canonical set of 189 hand-crafted 24×24 SVG master files (27 families across 7 architectural styles), our automated compiler pipeline generates type-safe, zero-bloat packages for Web, Cross-Platform Mobile, Android Native, and Apple Native applications.

1. Getting Started & Installation

Install the official scoped package for your target framework using npm, pnpm, or yarn, or add the native mobile package for Flutter, Android, or Apple Swift:

Web & React Native (npm / pnpm / yarn)

# React & Next.js
npm install @slatico/react
pnpm add @slatico/react
yarn add @slatico/react

# Vue 3 & Nuxt
npm install @slatico/vue
pnpm add @slatico/vue
yarn add @slatico/vue

# Vanilla HTML, Custom Elements (<slatico-icon>) & Icon Font
npm install @slatico/svg @slatico/web @slatico/font
pnpm add @slatico/svg @slatico/web @slatico/font
yarn add @slatico/svg @slatico/web @slatico/font

# React Native & Expo
npm install @slatico/react-native react-native-svg
pnpm add @slatico/react-native react-native-svg
yarn add @slatico/react-native react-native-svg

Flutter, Android Gradle & Apple SwiftPM

# Flutter (pubspec.yaml / CLI)
flutter pub add slatico_icons

# Android (build.gradle.kts)
implementation("com.infitus.slatico:slatico-android:0.1.0")

# Apple Swift Package Manager (Package.swift local monorepo path or Git release)
.package(path: "../slatico/packages/swift")

2. Seven Official Architectural Styles

Every Slatico icon family ships with all seven styles guaranteed on a unified 24×24 optical grid:

Style ID	Stroke / Geometry	Color Model	Icon Font	Engineering Purpose
thin	1px	Monochrome (currentColor / tint)	Yes (TTF / WOFF2)	1px precision hairline stroke for large display and high-DPI interfaces.
light	1.5px	Monochrome (currentColor / tint)	Yes (TTF / WOFF2)	1.5px refined stroke balanced for modern dense application layouts.
regular	2px	Monochrome (currentColor / tint)	Yes (TTF / WOFF2)	2px primary default stroke engineered for universal UI legibility.
bold	3px	Monochrome (currentColor / tint)	Yes (TTF / WOFF2)	3px heavy stroke for high-contrast emphasis and compact sizes.
fill	Solid / Layered	Monochrome (currentColor / tint)	Yes (TTF / WOFF2)	Solid silhouette paths ideal for active states and primary indicators.
duotone	1.75px	Primary + Secondary Tone/Alpha	SVG / Vector Only	Two-tone layered depth combining primary strokes with distinct secondary tone or opacity fills.
color	Solid / Layered	Primary (#FF6040) + Secondary (#000000) Customizable	SVG / Vector Only	Multicolor vector artwork preserving rich gradients and distinct semantic hues.

3. Icon Customization: Sizing, Primary & Secondary Colors

Slatico supports three distinct color models across all 8 platform SDKs:

Monochrome (`thin`–`fill`)

Inherits currentColor on the web or the ambient theme tint on mobile. Pass color to override.

Duotone (`duotone`)

Combines a primary foreground layer (color) with an independent secondary depth layer (secondaryColor and secondaryOpacity, default 0.2).

Dual-Color (`color`)

Authored with Slatico Primary (#FF6040) and dark structural accents (#000000). Pass color and/or secondaryColor in any SDK to customize either layer dynamically.

Customizing Monochrome, Duotone & Color Icons (@slatico/react)

import { BellIcon, ShieldCheckDuotoneIcon, WalletColorIcon } from "@slatico/react";

export function CustomizationDemo() {
  return (
    <div className="flex items-center gap-4">
      {/* 1. Monochrome: custom size + primary color */}
      <BellIcon variant="regular" size={24} color="#010520" />

      {/* 2. Duotone: independent primary color, secondaryColor & secondaryOpacity */}
      <ShieldCheckDuotoneIcon
        size={28}
        color="#010520"
        secondaryColor="#FF6040"
        secondaryOpacity={0.25}
      />

      {/* 3. Color: default palette (#FF6040 primary + #000000 secondary) */}
      <WalletColorIcon size={28} />

      {/* 4. Color: customized primary + secondary colors */}
      <WalletColorIcon
        size={28}
        color="#FF6040"
        secondaryColor="#010520"
      />
    </div>
  );
}

4. Accessibility Best Practices

Every Slatico SDK is engineered to be accessible by default and prevent noisy screen reader announcements:

Decorative Icons (Default): When an icon sits beside visible text (such as a button label), omit the label prop. Web packages automatically set aria-hidden="true" and focusable="false"; Flutter sets excludeFromSemantics: true; Jetpack Compose passes contentDescription = null; and SwiftUI applies .accessibilityHidden(true).
Semantic / Standalone Icons: When an icon conveys meaning without adjacent text, pass title="Notifications" (React, Vue, SVG, React Native), label="Notifications" (Web Components), semanticLabel: 'Notifications' (Flutter), contentDescription = "Notifications" (Android), or accessibilityLabel: "Notifications" (SwiftUI).

5. Import Optimization & Tree Shaking

All JavaScript/TypeScript packages (@slatico/core, @slatico/svg, @slatico/react, @slatico/vue, @slatico/web, and @slatico/react-native) declare "sideEffects": false and expose dedicated per-icon subpath exports so bundlers like Vite, Next.js (Turbopack / Webpack), Rollup, and Metro only include the exact icons your app renders:

Subpath Imports for Maximum Tree Shaking

// Named barrel import (tree-shaken by ESM bundlers)
import { BellIcon, ShieldCheckDuotoneIcon } from "@slatico/react";

// Direct per-icon subpath import (zero barrel evaluation in dev & prod)
import { BellIcon } from "@slatico/react/icons/bell";
import { ArrowUpRightBoldIcon } from "@slatico/vue/icons/arrow-up-right";
import { bellIconDef } from "@slatico/web/icons/bell";
import { WalletColorIcon } from "@slatico/react-native/icons/wallet";

6. Monorepo Workspace Quickstart

Clone the repository to develop locally or consume packages directly from source before public registry publication:

Terminal (pnpm workspace)

git clone https://github.com/infitusofficial/slatico.git
cd slatico
pnpm install

# Validate 189 master SVGs, generate all platform packages, and build:
pnpm icons:validate
pnpm icons:generate
pnpm build:packages

7. Troubleshooting & FAQ

Why aren't Duotone or Color icons included in `@slatico/font` or Flutter `IconData`?

Standard TrueType/WOFF2 glyph tables only support a single monochrome outline per glyph. Because duotone requires independent dual-layer opacity and color requires multi-tone fills, use @slatico/svg, @slatico/react, @slatico/vue, @slatico/web, or Flutter's SlaticoIcon widget for Duotone and Color styles.

My Color icon on Android XML turns solid black or white when placed in an `ImageView`.

Remove app:tint from the ImageView when rendering @drawable/slatico_*_color resources so Android preserves the authored #FF6040 and #000000 vector path fills. To customize both colors dynamically on Android, use the Jetpack Compose SlaticoIcon composable with color and secondaryColor.

How do I prevent Dark Mode from hiding the dark secondary paths of a `color` icon?

In Dark Mode, pass a light secondary color (such as secondaryColor="#FFFFFF") or set --slatico-secondary-color: #FFFFFF; inside your .dark CSS scope so the secondary layer contrasts cleanly against dark surfaces while preserving the #FF6040 brand primary fill.

8. Open-Source License (MIT)

All 189 Slatico icons and all 8 platform SDKs are released under the permissive MIT License by Infitus Creative Studio. You may use, customize, and bundle Slatico in personal and commercial projects without attribution requirements.

9. Choose Your Platform Integration Guide

@slatico/react

React & Next.js

Tree-shakeable React SVG components with typed style, size, primary color, and Duotone secondary controls.

Read React guide →

@slatico/vue

Vue 3 & Nuxt

First-class Vue 3 functional icon components supporting all 7 architectural styles and reactive props.

Read Vue 3 guide →

@slatico/svg · @slatico/web · @slatico/font

Vanilla HTML, SVG & Web Components

Zero-framework SVG rendering, <slatico-icon> custom elements with Shadow DOM, and WOFF2/TTF icon fonts.

Read HTML / Web guide →

@slatico/react-native

React Native & Expo

Native vector rendering powered by react-native-svg with resolved Duotone colors and zero web-only CSS dependencies.

Read React Native guide →

slatico_icons

Flutter (iOS, Android, Web & Desktop)

Multi-style SlaticoIcon widget and SlaticoIcons catalog backed by flutter_svg and bundled vector assets.

Read Flutter guide →

com.infitus.slatico:slatico-android

Android Native (Jetpack Compose & XML)

189 native Android VectorDrawable resources and Jetpack Compose SlaticoIcon composables with runtime tinting.

Read Android guide →

SlaticoIcons (Swift Package)

Apple Native (SwiftUI, UIKit & AppKit)

Native CoreGraphics/SwiftUI vector path renderer with SwiftUI View, UIImage, and NSImage APIs.

Read Swift / Apple guide →