inclusive-design / guide.inclusivedesign.ca

The source files for content for the Inclusive Design Guide.

Home Page:http://guide.inclusivedesign.ca

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Import Logos with as svg sprites

jobara opened this issue · comments

Describe the solution you'd like

The logos are used across every page of the site. The IDRC logo in the header, and the Floe and P4A logos in the footer. Instead of inlining them into every page, we should pull them in as SVG sprites with <use>. If we reference the sprite sheet as an external SVG we also gain the benefit of browser cacheing.

Additional context or notes

We'll need to compile the SVGs into a single SVG sprite sheet. This can either be done manually or we can investigate automated processes.

Additional work may be needed to allow the SVG sprites to be properly styled. This may just involve updating the CSS, or could require some minor changes to the SVG itself. For example CSS custom properties can be used to pull in external styles into an imported SVG.

see: https://css-tricks.com/a-complete-guide-to-custom-properties/#custom-properties-and-web-components-shadow-dom