A grown site accumulates icon mechanisms the way a drawer accumulates cables: a sprite here, an icon font there, SVG pasted into templates, CSS masks over spans. KS Icon Manager replaces the lot with one source — four public libraries in five sets, the site’s own SVG beside them, and any icon on the site one identifier away. Published as open source under GPLv3.
One id for any icon
A set, a name, and a variant when the set has them — that address is the whole interface, the same string in a template, in the block and in the picker. Each segment is validated against a strict grammar, so an id is either exactly right or rejected.
An icon that does not exist renders nothing at all: no broken box, no placeholder glyph, just the honest absence — and a filter to put a placeholder there for the site that wants one.
The size comes from the text
An icon with no stated size is one em square: it takes the size of the line it sits in, large in a heading and small in a caption, with nothing to synchronise. Name a size and it prints as pixels instead.
Font Awesome is the one exception and it is handled, not ignored: its drawings share a height but not a width, so a square box would pad them — that family sizes by height and lets each glyph keep its own width.
An uploaded SVG is not trusted
The custom set takes the site’s own icons, and every upload is rebuilt from a whitelist rather than checked against a blacklist: scripts, foreign objects, event attributes, external references and data URLs simply do not survive the rebuild. There is a size ceiling, and it is a filter rather than a constant.
Brand marks get a set of their own, and its one difference is the point: the renderer never touches its colours, because a logo recoloured to match the text is no longer the logo.
Where the editors meet it
A picker any admin form can print — a metabox, a term screen, a settings panel — with search across the enabled sets and a preview of what is chosen. A block for the editor that builds its SVG when the page is served. A REST route behind the editing capability that powers both.
Whole sets can be switched off, which is how the choice editors see stays the site’s choice rather than everything the disk holds.
Where the libraries come from
The five sets install from the npm registry, and every download is verified against its checksum before a file lands on disk. Each set keeps a manifest — the version, the variants, the full list of names — rebuilt on every install, upload, rename and delete, and cached so the lookup costs nothing per request.
The libraries keep their own licences and their attribution travels with them into the management screen.
Как он устроен внутри
The API a theme calls is one class with one import, guarded so a site without the plugin degrades instead of failing; anything echoed passes a whitelist the plugin itself provides. No runtime dependencies, and no build step either — the admin scripts are written against the platform’s own globals and ship as they are, so the repository runs the moment it is cloned.
Before a release: static analysis, coding standards against the WordPress ruleset, unit tests, and the same command in CI that runs at the keyboard.
Роли
Разработчик
Konstantin Sorokin
Выполнено
- Five icon sets installed from the npm registry, every download checksum-verified
- One identifier for any icon: the set, the name, the variant — strictly validated
- A theme API, a picker for admin forms, an editor block and a REST route behind it
- An SVG sanitizer that rebuilds uploads from a whitelist; a logo set that keeps its palette
- Sizing from the surrounding text, with the Font Awesome width exception handled
- Static analysis, WordPress coding standards, unit tests, CI