Ikony jako font: převedení na jednotlivá SVG

Ikonfonty jsou přežitek. Řešené problémy již dávno problémy nejsou, a tak dnes již jen zpomalují uživatele ztíženou administrací obsahu. Při redesignu jakéhokoliv projektu tedy od tohoto hacku utíkám a obsahové ikony implementuji jako obrázky.

Často je ale potřeba vytáhnout ikony z původního webu a to je proces, nad kterým vždy znovu bádám…

Jak vyextrahovat ikony z fontu

  1. V DevTools vybrat příslušný prvek (CMD + Shift + C) a najít jeho font-family.
  2. Přes CMD + P najít a stáhnout příslušný soubor.
  3. Převést Transfonterem do formátu SVG.
  4. Stažené SVG nahrát do IcoMoonu, přes Shift vybrat všechny ikony (výběr funguje zvláštně – na obou osách – je tedy akorát třeba ho přeprat).
  5. V dolní liště se překliknout na Generate SVG & More a stáhnout balík jednotlivých souborů.
Screenshot z DevTools znázorňující klíč k dohledání souboru.

IcoMoon jednotlivé soubory pojmenovává podle entit v content, dohledávání je tak hračka