Giving a tag its own icon

3 min

A tag can carry an icon, and it shows up in two places: the heading of its /tag/<name>/ listing, and the date badge of every post that has the tag, where it replaces the content-type icon rather than joining it.

tag_icons:
  - tag: "fotografie"
    icon: "image"
  - tag: "kolo"
    icon_svg: '<svg viewBox="0 0 24 24" ...>...</svg>'

A tag is matched here by its address -- the /tag/<name>/ its listing lives at -- so how the name is spelled, here or in a post, makes no difference: sci-fi, Sci Fi and sci_fi are one tag, share one page and wear one icon. A tag that leaves nothing to be addressed by, an emoji or a piece of punctuation, has no page and takes no icon either.

The order is the priority. Most posts carry more than one tag -- 68% of them on the archive this engine was built around -- and the tag a post was given FIRST is usually the one an importer added, not a subject: twitter opens 1256 posts there. So the first entry in this list that a post has is the one it wears, and the site owner decides once instead of post by post.

icon names one the engine ships. Eight of them are the content types themselves -- text, quote, chat, image, video, audio, link, document -- and the rest are the things blogs are about:


getting about	`bike` `car` `train` `plane` `boat` `walk`
places and weather	`map` `pin` `mountain` `tree` `sun` `cloud` `rain` `snow`
a day	`coffee` `beer` `food` `wine` `clock` `calendar` `home` `heart` `star` `gift`
making things	`pen` `brush` `camera` `film` `mic` `music` `book` `tools` `hammer`
machines	`laptop` `phone` `code` `terminal` `server` `bug` `lock` `key`
living things	`paw` `bird` `leaf` `flower`
ideas	`bulb` `flag` `globe` `eye` `chart` `target` `rocket` `mail` `briefcase` `box`

They are line drawings on the same grid as the eight, so a badge wearing one looks like a badge. doctor prints the whole list when a name is not among them, which is usually a synonym away -- bicycle for bike. A footer link in social: can wear one too, where the network marks have nothing to offer: icon: globe for somebody's other site.

icon_svg is your own drawing, on the same 24-unit grid (viewBox="0 0 24 24") and stroked in currentColor so it follows the light and dark themes. It does not have to be drawn from scratch: open an icon from any set that works on that grid -- Lucide, Feather and Tabler all do -- copy the <path> elements out of its file and paste them between <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"> and </svg>. Mind the licence of whatever you take, and if the set fills its shapes rather than stroking them, drop the fill="none" and take stroke out. Scripts, styles and event handlers are stripped out of it before it reaches a page -- the same treatment an imported embed gets, and for the same reason. doctor says when an icon name is one the engine does not have, when an icon_svg holds no <svg>, and when it is drawn to another scale. An icon_svg that is not a drawing at all -- a filename, an address, an emoji -- is refused rather than printed where the glyph goes, and the tag falls back to what it would have had with no entry here.

A tag with no entry here changes nothing: its listing keeps the generic tag icon and its posts keep the icon of their content type.

operations