Obsidian Stats logoObsidian Stats

Tabler Icons for TBDL

by Thomas
5
4
3
2
1
Score: 50/100
Install Code

Description

Obsidian plugin — insert Tabler icons into notes and activate them in the TBDL theme.

Reviews

No reviews yet.

Stats

0
stars
37
downloads
0
forks
26
days
26
days
26
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
2
commits

Latest Version

1.0.0
a month ago

Changelog

See all version on GitHub

README file from

Github

Tabler Icons for TBDL

An Obsidian plugin that lets you insert Tabler 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

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.

Sponsors