Managing icons in wingsuit
There are two ways to use icons
- as an inline element, eg
svg_icons
atom - as a psudo element with the
_icons.scss
frontend tokens
Psudo elements are the preferred method as its more accessible and doesn't add extra semantics to the page
Wingsuit creates sprite.svg
for us when using icons as inline elements. this is handy for optimisation but because of the build order we can't reference it in the _icons.scss
frontend tokens.
In the process of creating sprite.svg
the icons aren't copied over to the build directory so we would need to have two copies of the icons in the svg_icons folder, one to build sprite.svg and one to reference in the _icons.scss
frontend tokens. This isn't too much overhead but its not idea.
Another issue with referencing through psudo elements is that because the element is considered a different document setting fill=currentcolor
won't work as the context is lost. So we will need to have fill="#ff81d6"
versions for each color available in icons. We don't really want to maintain a figma file of all the icons with all the colours so we would need a build process to create these.
The current solution I have added is to encode the icon svg's with fill set to the relevant color this isn't a permanent solution.
My proposed solution is to follow the govuk method shown here and avoid icons where possible, but when they are needed to include them via psudo elements as a preference, the site does allow in some instances elements (eg pagination uses svg over psudo for some reason)
To do this we would
-
update svg_icons to not use sprite.svg
<svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
<path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
</svg>
-
create a script to generate a copy of every base icon with every color variant programatically into the svg_icons image folder (as opposed to svg folder which generates sprite.svg
). -
references to icons will all be done through the _icons.scss
frontend tokens file and mixins-
update apply to give icon classes as per convention (this is for svg_icons mainly) -
update apply-icon to take icon_type and icon_color and apply that nested or not nested as per convention
-