Molecule.dev

@molecule/app-fonts-ionicons

Provider bond · fonts · App (browser) · v1.1.1 · Apache-2.0

Ionicons 2.0 icon font — local, self-hosted (no external CDN), renders markup using i.ion-* glyph classes

npm install @molecule/app-fonts-ionicons

npm · Source on GitHub · Implements @molecule/app-fonts

How it works

@molecule/app-fonts-ionicons is a provider bond on the app (browser) side: it implements the fonts core interface (@molecule/app-fonts) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { setFont } from '@molecule/app-fonts'
import { font as icons } from '@molecule/app-fonts-ionicons'

setFont(icons) // once, at app startup — before first paint

Works with: @molecule/app-fonts

Reference

Ionicons 2.0.1 icon font for molecule.dev — self-hosted, no external CDN.

Bond this provider when the app's markup renders icons through Ionicons 2.x i.ion-* classes (<i class="ion-heart">, ion-plus-round, ion-edit, ion-trash-a, ion-gear-a, ion-compose, … — the class-name set the RealWorld "Conduit" spec's markup is written against). Without it the icon webfont is never loaded: every <i class="ion-*"> renders 0×0, glyphs disappear and e2e click targets on icon buttons fail.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { setFont } from '@molecule/app-fonts'
import { font as icons } from '@molecule/app-fonts-ionicons'

setFont(icons) // once, at app startup — before first paint

setFont() injects the @font-face (served from the app's /fonts/) plus the full .ion-* glyph stylesheet, so plain markup like

<i class="ion-heart"></i>

renders its glyph with nothing else to wire. To bond it:

mlcl add @molecule/app-fonts-ionicons

Type

provider

Installation

npm install @molecule/app-fonts-ionicons @molecule/app-fonts

API

Constants

font

Ionicons 2.0.1 font definition — local, self-hosted (no external CDN).

Markup rendered by the Ionicons 2.x class names (<i class="ion-heart">, ion-plus-round, ion-edit, ion-trash-a, ion-gear-a, ion-compose, … — the set the RealWorld "Conduit" spec's markup uses) needs this provider bonded: without the webfont the <i> elements render 0×0 and their click targets vanish. The full .ion-* glyph map ships as utilityCss, injected by setFont() alongside the @font-face.

const font: FontDefinition

Core Interface

Implements @molecule/app-fonts interface.

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-fonts ^1.0.1

Runtime Dependencies

  • @molecule/app-fonts

  • Wire with setFont() from @molecule/app-fonts, never a raw bond('font', …) — setFont() injects the @font-face and the glyph CSS; a raw bond renders nothing.

  • This is the Ionicons 2.0.x class-name set (ion-heart, not the version 4+ ion-md-heart names). Current Ionicons (4/5/6/7) use different class names and different packages; this provider exists so markup written against the 2.x names (RealWorld Conduit and its ecosystem) works self-hosted.

  • Wiring it without mlcl (the sandbox): the package is already installed under node_modules — add an "@molecule/app-fonts-ionicons" dependency to the app's package.json (pin the version already installed there), then in app/src/bonds/index.ts call setFont(icons). Preferred: import the webfont as an asset so nothing is copied — import woff from '@molecule/app-fonts-ionicons/fonts/ionicons.woff?url' then setFont({ ...icons, source: { type: 'local', faces: [{ file: woff, weight: 400 }] } }). setFont() uses a file starting with /, http or data: as-is. Without an asset import, copy node_modules/@molecule/app-fonts-ionicons/fonts/ionicons.woff to app/public/fonts/ionicons.woff and call setFont(icons) — a plain filename is served from <basePath>fonts/<file>.