locomotive-boilerplate/assets/styles/objects/_icons.scss

// ==========================================================================
// Objects / SVG Icons
// ==========================================================================


// Markup
//
// 1. If icon is accessible and has a title
// 2. If icon is decorative
//
// <i class="o-icon ${modifier}">
//     <svg
//         class="svg-${icon-name}"
//         xmlns="http://www.w3.org/2000/svg"
//         role="img" [1]
//         aria-hidden="true" [2]
//         focusable="false" [2]
//         aria-labelledby="${id}" [1]
//     >
//         <title id="${id}"> [1]
//             Locomotive
//         </title>
//         <use xlink:href="assets/images/sprite.svg#${icon-name}" xmlns:xlink="http://www.w3.org/1999/xlink"/>
//     </svg>
// </i>

// Global styles for icones
// ==========================================================================

.o-icon {
    display: inline-block;
    vertical-align: middle;

    svg {
        --icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));

        display: block;
        width: var(--icon-width);
        height: var(--icon-height);
        fill: currentColor;
    }
}


// SVG sizes
// ==========================================================================

// // Logo
// .svg-logo {
//     --icon-width: #{rem(100px)};
//     --icon-ratio: math.div(20, 30); // width/height based on svg viewBox

//     // Sizes
//     .o-icon.-big & {
//         --icon-width: #{rem(200px)};
//     }
// }