# Tabler Icons for TBDL

An Obsidian plugin that lets you insert [Tabler](https://tabler.io/icons)
icons into your notes and swap the default callout glyphs of the **TBDL**
theme for Tabler icons.

## Features

- **Icon picker** — search all ~5,130 Tabler outline icons by name and insert
  the one you want at the cursor, as an inline SVG. Icons load on demand from
  a CDN as they scroll into view, so the picker stays light.
- **Configurable size** — set the default pixel size of inserted icons.
- **TBDL theme integration** — one toggle (in settings, ribbon, or command
  palette) replaces Obsidian's built-in callout glyphs with matching Tabler
  icons across every callout type (`note`, `tip`, `warning`, `danger`, …).
  The icons inherit each callout's accent color, in light and dark mode.

## Usage

### Insert an icon

- Command palette → **Insert a Tabler icon**.
- Or click the star icon in the left ribbon.

A searchable grid opens. Click an icon to drop its inline SVG at the cursor.
The SVG uses `stroke="currentColor"`, so it inherits the surrounding text
color and respects the theme in both light and dark mode.

> Inline SVG renders in **Reading view**. In Live Preview it appears as raw
> HTML until you switch to Reading view. The picker fetches icon SVGs from
> the jsDelivr CDN, so an internet connection is required on first use.

### Activate Tabler icons in the TBDL theme

Three equivalent ways to toggle:

- Settings → **Tabler Icons for TBDL** → *Activate Tabler icons in the TBDL
  theme* (button or toggle).
- Command palette → **Toggle Tabler icons in the TBDL theme**.

When active, a `tbdl-tabler` class is added to the body and the plugin sets
the per-callout CSS mask variables the TBDL theme expects. The theme then
draws each callout icon with a Tabler SVG mask, colored by the callout's
accent. The 19 callout icons are bundled, so theme integration works offline.

> Activate only one icon-set plugin at a time (Lucide *or* Tabler) to avoid
> both setting the same theme variables.

## Installation

### From the community plugin browser

Once accepted into the community plugin directory, search for "Tabler Icons
for TBDL" and install it.

### Manual

1. Download `main.js`, `manifest.json` and `styles.css` from the latest
   release.
2. In your vault, create
   `.obsidian/plugins/tbdl-tabler-icons/` and copy the three files in.
3. Settings → Community plugins → enable **Tabler Icons for TBDL**.

## Development

```bash
npm install
npm run dev      # generate index + watch + sourcemaps
npm run build    # generate index + minified main.js for release
```

The build generates `src/generated.ts` from the installed `@tabler/icons`
package (icon names + the 19 callout SVGs). Requires Node 18+. Because icon
SVGs are fetched on demand from the CDN, `main.js` stays small (~120 KB).

## License

MIT.