At present, mixins are only used to pull in some general SVG icons as background images for any element you like. These icons were sourced from Remix Icon, where you can copy/paste the code for more icons if you need them. I've only been adding the icons that I personally need on a project-by-project basis.

I've also included a mixin for the "darkmode" version of each icon... for what I feel are pretty self-explanatory reasons.

Here's the full list, at present.

@mixin icon-warning-filled

@mixin icon-warning-filled-darkmode

@mixin icon-warning-outline

@mixin icon-warning-outline-darkmode

@mixin icon-search-eye

@mixin icon-search-eye-darkmode

@mixin icon-search-regular

@mixin icon-search-regular-darkmode

@mixin icon-checkmark-filled

@mixin icon-checkmark-filled-darkmode

@mixin icon-play-button

@mixin icon-play-button-darkmode

Styling your icon mixins

The mixins look a bit like this, usually:

@mixin icon-warning-filled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E");
}

Then you can pull in any of these icons, then style and position them like so:

div {
    @include icon-search-eye;
    background-repeat: none;
    background-size: 1.5rem 1.5rem;
    background-position: center;
}