No notes defined.
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" fill="white" />
<path d="M1.76837 2.03284H14.2316C15.4074 2.03284 16 2.62284 16 3.82284V12.2428C16 13.4328 15.4074 14.0328 14.2316 14.0328H1.76837C0.592592 14.0328 0 13.4328 0 12.2428V3.82284C0 2.62284 0.592592 2.03284 1.76837 2.03284ZM7.9953 10.6328L14.3351 5.10284C14.5608 4.90284 14.7396 4.44284 14.4574 4.03284C14.1846 3.62284 13.6861 3.61284 13.3568 3.86284L7.9953 7.72284L2.64315 3.86284C2.31393 3.61284 1.8154 3.62284 1.54262 4.03284C1.26044 4.44284 1.43915 4.90284 1.6649 5.10284L7.9953 10.6328Z" fill="black" />
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" fill="white"/>
<path
d="M1.76837 2.03284H14.2316C15.4074 2.03284 16 2.62284 16 3.82284V12.2428C16 13.4328 15.4074 14.0328 14.2316 14.0328H1.76837C0.592592 14.0328 0 13.4328 0 12.2428V3.82284C0 2.62284 0.592592 2.03284 1.76837 2.03284ZM7.9953 10.6328L14.3351 5.10284C14.5608 4.90284 14.7396 4.44284 14.4574 4.03284C14.1846 3.62284 13.6861 3.61284 13.3568 3.86284L7.9953 7.72284L2.64315 3.86284C2.31393 3.61284 1.8154 3.62284 1.54262 4.03284C1.26044 4.44284 1.43915 4.90284 1.6649 5.10284L7.9953 10.6328Z"
fill="{{ fill ?: 'black' }}"/>
</svg>
// add icons to this array with their filename and type,
// the loop at the bottom of the file will create classes for them
$icons: (
//'facebook': 'svg',
//'instagram': 'svg',
//'twitter': 'svg',
//'linkedin': 'svg',
//'youtube': 'svg',
//'external-primary': 'svg',
//'phone': 'svg',
//'mail': 'svg',
//'pin': 'svg',
);
.icon {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
text-align: center;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
vertical-align: baseline;
top: 0.1em;
svg,
img {
display: block;
width: 100%;
max-height: 100%;
vertical-align: middle;
}
svg {
height: 100%;
//fill: #000;
}
&:before {
font-size: 1em;
display: inline-block;
}
@each $name, $extension in $icons {
&--#{$name} {
background-image: url('../img/icon-#{$name}.#{$extension}');
}
}
// Layout
&--margin-before {
margin-inline-start: 0.35em;
}
&--margin-after {
margin-inline-end: 0.35em;
}
// Themes
&--primary {
svg, path {
fill: $primary !important;
}
}
&--secondary {
svg, path {
fill: $secondary !important;
}
}
&--tertiary {
svg, path {
fill: $tertiary !important;
}
}
// Variant generator
// (see loop at top)
//@each $name, $extension in $icons {
// &--#{$name} {
// background-image: url('../img/icon-#{$name}.#{$extension}');
// }
//}
// Special
@at-root {
a, button {
&:where(:has(.svgHeart)) {
path {
fill: rgba(white, 0);
stroke-width: 2;
stroke: $grey;
transition: all 100ms;
}
&:hover, &:focus {
path {
fill: rgba($pink, 0.5);
stroke-width: 0;
}
}
&:active {
path {
fill: $pink;
stroke-width: 0;
}
}
}
&:where(:has(.svgHeart--filled)) {
path {
transition: all 100ms;
}
&:hover, &:focus {
path {
fill: rgba($pink, 0.5);
stroke-width: 0;
}
}
&:active {
path {
fill: rgba(white, 0);
stroke-width: 2;
}
}
}
}
}
}