Wagtail: Phase out icon font and use SVG everywhere

Created on 3 Jun 2020  路  3Comments  路  Source: wagtail/wagtail

In https://github.com/wagtail/wagtail/pull/4821 the menu font icons are replaced with SVG icons. It is a nice start. In this issue an overview of work to be done to have SVG icons everywhere.

We choose to switch to SVG icons for accessibility (title attr and aria labels). But SVG icons are also easier to maintain, customise and extend. All icons are all-ready converted to SVG. We need to dorp the icon font reference (CSS) and use the SVG icon like this:

{% load wagtailadmin_tags %}
{% icon name="rocket" classname="..." title="Launch" %}

The intention is to drop Wagtail font icon and CSS from future Wagtail releases. We need to decide what is needed for a proper deprecation process.

Priority

Icon font usage that needs to be refactored:

  • [x] Header icons <h1 class="icon icon-image">Images</h1> https://github.com/wagtail/wagtail/pull/6121
  • [x] Messages framework messages messages success https://github.com/wagtail/wagtail/pull/6124
  • [x] Button plus button bicolor icon icon-plus #6151
  • [x] Dropdown buttons dropdown-toggle icon icon-arrow-down #6151
  • [x] More buttons o-icon c-dropdown__toggle [ icon icon-arrow-down #6151
  • [x] Wagtail user bar and menu items wagtail-icon wagtail-icon-wagtail https://github.com/wagtail/wagtail/pull/6125
  • [x] MenuItems (including ModelAdminMenuItem and GroupMenuItem) #6402
  • [x] Help text help-block help-critical @Scotchester #6457
  • [x] Breadcrumb (home icon) #6438 @allcaps
  • [x] Pagination, previous and next chevrons @Scotchester #6573
  • [ ] SearchAreas API @thibaudcolas #6493
  • [ ] Settings menu item @thibaudcolas #6649
  • [ ] Inputs .url_field .input:before @Scotchester (check whether we can easily add an SVG element there)
  • [ ] Page choosers .page-chooser .unchosen:before
  • [ ] Hamburger menu @allcaps Should this be a button? Currently a div.
  • [ ] Spinner @allcaps
  • [ ] Search submit button @allcaps
  • [ ] Main nav #footer. arrow down, account, logout
  • [ ] edit panels .title-wrapper:before @thibaudcolas

Additional icon font work:

I'd propose to keep this issue as a meta issue to keep track of progress. Work can be done in separate issues and pull requests. To keep pull requests reviewable.

Accessibility Frontend Enhancement
Source
picture allcaps
👍2

Most helpful comment

@Scotchester @rinti and I have expressed some interest in trying to get the bulk of this done in time for Wagtail 2.11, scheduled for release on 2020-11-01. With the 2-week release candidate period, that leaves us until 2020-10-16 to tackle all of the icons changes, and the new documentation.

I鈥檝e tagged us on the individual tasks we鈥檙e intending to do 鈥撀爄f others want to pick up other tasks please let people know via a comment.

@allcaps how does that sound?

picture thibaudcolas on 25 Sep 2020
❤2

All 3 comments

Wagtail userbar - wagtail/admin/templates/wagtailadmin/userbar/base.html
uses
<i class="wagtail-icon wagtail-icon-wagtail"></i>

lb- picture lb- on 3 Jun 2020
👍1

Working on buttons with icons

zerolab picture zerolab on 12 Jun 2020

@Scotchester @rinti and I have expressed some interest in trying to get the bulk of this done in time for Wagtail 2.11, scheduled for release on 2020-11-01. With the 2-week release candidate period, that leaves us until 2020-10-16 to tackle all of the icons changes, and the new documentation.

I鈥檝e tagged us on the individual tasks we鈥檙e intending to do 鈥撀爄f others want to pick up other tasks please let people know via a comment.

@allcaps how does that sound?

thibaudcolas picture thibaudcolas on 25 Sep 2020
❤2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

gasman picture gasman  路  3Comments
contactr2m picture contactr2m  路  3Comments
inostia picture inostia  路  3Comments
gasman picture gasman  路  3Comments
spoetnik picture spoetnik  路  3Comments