locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.
https://locomotivemtl-boilerplate.vercel.app/
MIT License
458 stars 71 forks source link

Add icon object styles and html example #110

Closed lucasvallenet closed 2 years ago

lucasvallenet commented 2 years ago

The Icons styles is meant to keep all svg icons sizes in one place and compute sizes with the original svg ratio.

Use :

<i class="o-icon #{modifiers}">
    <svg
        class="svg-logo"
        xmlns="http://www.w3.org/2000/svg"
        role="img"
        aria-labelledby="my-icon-aria-labelledby-id"
    >
        <title id="my-icon-aria-labelledby-id">
            Icon title
        </title>
        <use xlink:href="assets/images/sprite.svg#my-icon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
    </svg>
</i>

Todo: If merged, remove html markup in /www/index.html, /assets/images/sprite/logo.svg and /assets/styles/objects/_icons.scss logo styles

lucasvallenet commented 2 years ago

@mcaskill I have reset the /www/assets/scripts changes to master