DoubleShore Icon Picker

A filesystem-driven SVG icon-picker property editor for Umbraco 17. Point it at a folder of your own SVGs — organised by style and group — and editors can search and pick them in the backoffice; the chosen icon is rendered inline so it inherits currentColor.

This package ships without a bundled icon set. You bring your own SVGs (see Adding icons below). This keeps the package free of any icon-library redistribution restrictions — use whatever set your project's licence allows (e.g. an MIT/CC0 set, or your own artwork).

Features

• Property editor that stores the selected icon name (+ style) and renders the SVG inline.
• Icons discovered from disk: icons/{Style}/ and icons/{Style}/{Group}/. No rebuild required to use new icons at runtime once they are on disk (the picker re-scans).
• Search across one style, several styles, or All.
• Hardcoded stroke/fill hex colours are rewritten to currentColor so icons theme with CSS.
• Backoffice upload/manage UI (create groups, upload, delete) for editors, behind backoffice authentication. SVGs are sanitised on upload (script tags, event handlers and javascript: URLs are stripped).

Requirements

• Umbraco 17 (new backoffice) on .NET 10.

Installation

dotnet add package DoubleShore.Kit.IconPicker

The property editor and its backoffice UI register automatically on boot. Create a Data Type based on Icon Picker, then add it to a document type.

Adding icons

The picker reads SVGs from, in your site:

wwwroot/App_Plugins/DoubleShore.Kit.IconPicker/icons/{Style}/{Group}/*.svg

• {Style} is the top-level folder (e.g. Outline, Solid); {Group} is an optional subfolder used to group icons within a style. SVGs placed directly under a style belong to a default group named after that style.
• Each SVG should be a single, self-contained <svg …>…</svg> element. Use currentColor (or a hardcoded hex, which the editor will convert) so the icon picks up the surrounding text colour.
• You can also add icons from the backoffice via the picker's upload UI (requires a signed-in backoffice user).

License

MIT — see the repository LICENSE. Note that whatever icons you add carry their own licence; this package does not ship any.