In any component that @use '../icons' as *; (or the project’s icons module), call the mixin on a block or inline element. The icon will take the size and color you pass.

@include masked-icon($size, $icon-path, $color);

Parameters:

• $size – width and height (e.g. 1.5rem, 2rem)
• $icon – path to the SVG file (relative to the compiled CSS, often ../../src/assets/img/icon/name.svg from a component in src/sass/components/)
• $color – fill color (e.g. $color-pitt-gold, $color-pitt-royal, $color-light)

Changing colors: Use any Sass color variable or value as the third argument. The SVG is used as a mask, so the visible color is always the element’s background-color. Example for gold on dark backgrounds:

@include masked-icon(2rem, '../../src/assets/img/icon/chevron-right.svg', $color-pitt-gold);

Example for white (e.g. social icons in footer):

@include masked-icon(1.5rem, '../../src/assets/img/social/meta.svg', $color-light);