Obsidian Stats logoObsidian Stats

Brand icons

by richin13
5
4
3
2
1
Score: 35/100
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. Add brand icons/logos to your notes, inline.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
1
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

Brand Icons

Display brand logos and icons inline in your Obsidian notes.

Write :brand:github.com: in your note and it renders as an inline icon right next to your text.

screenshot

Syntax

:brand:github.com:
:brand:spotify.com|logo:
:brand:stripe.com|icon|32:

The format is :brand:domain: with optional variant and size overrides separated by |.

Part Required Description
domain Yes The company's domain, e.g. github.com
variant No icon, logo, or symbol (depends on provider)
size No Height in pixels, overrides the default

Settings

  • Provider -- which brand icon service to fetch from (default: Brandfetch)
  • Default size -- icon height in pixels (default: 20)
  • Default variant -- which logo variant to use when not specified

Each provider may have its own settings. For example, Brandfetch requires a client ID from their developer portal.

Installation

Copy main.js, manifest.json, and styles.css into your vault at .obsidian/plugins/brand-icons/, then enable the plugin in settings.

Architecture

src/
  main.ts             Plugin lifecycle, registers renderers and settings
  parse.ts            Regex tokenizer -> BrandToken {domain, variant?, size?}
  brand-element.ts    BrandToken -> <img> via provider.buildUrl()
  post-processor.ts   Reading mode: DOM TreeWalker replaces text nodes
  editor-extension.ts Live preview: CodeMirror 6 decorations, reveals syntax at cursor
  settings.ts         Settings interface + dynamic provider-driven UI
  providers/
    provider.ts       BrandProvider interface + registry
    brandfetch.ts     Brandfetch CDN implementation
styles.css            Single rule using Obsidian CSS variables

Data flow: text node -> findBrandSpans() -> BrandToken -> createBrandImg() -> provider.buildUrl() -> <img>

Adding a provider

Create a new file in src/providers/, implement the BrandProvider interface, and push it to the providers array. No other files need changes. The settings UI and URL building are driven entirely by the interface.

Development

npm install
npm run dev    # watch mode
npm run build  # production build
Sponsors