No notes defined.
<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9916 0.714951H23.7314L15.5607 10.0543L25.1734 22.7604H17.6471L11.7528 15.0532L5.00698 22.7604H1.26515L10.0049 12.7707L0.783447 0.715967H8.50084L13.829 7.7606L19.9916 0.714951ZM18.6796 20.5227H20.7517L7.37484 2.83586H5.15128L18.6796 20.5227Z" fill="black" />
</svg>
<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9916 0.714951H23.7314L15.5607 10.0543L25.1734 22.7604H17.6471L11.7528 15.0532L5.00698 22.7604H1.26515L10.0049 12.7707L0.783447 0.715967H8.50084L13.829 7.7606L19.9916 0.714951ZM18.6796 20.5227H20.7517L7.37484 2.83586H5.15128L18.6796 20.5227Z"
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;
}
}
}
}
}
}