I am aiming to layer 2 SVGs on top of each other. The top SVG will have an outline to make it stand out more from the bottom SVG. These SVGs are embedded on buttons with transitions and hover colors. I want the outline SVG to match the background color of the button.
I'm working with react & material-ui, where the Icons and colors are dynamic and only known at runtime.
In summary, my goal is to ensure readability of both icons. I believe outlining the SVG with itself is a good approach, but I am open to other solutions. I am currently struggling to 'inherit' the background-color of the button and apply it as the font-color of the outline SVG, while making sure it works seamlessly with the :hover transition
.svg-bottom-icon {
user-select: none;
width: 1em;
height: 1em;
display: inline-block;
fill: currentColor;
flex-shrink: 0;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: 1.8rem;
}
.svg-outline-icon {
width: 1em;
height: 1em;
display: inline-block;
fill: currentColor;
flex-shrink: 0;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: 1.8rem;
color: white;
fill: currentcolor;
stroke: currentcolor;
stroke-width: 6;
font-size: 20px;
left: 25px;
position: absolute;
top: 0;
}
.svg-top-icon {
-webkit-user-select: none;
*/ -moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 1em;
height: 1em;
display: inline-block;
fill: currentColor;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: 1.8rem;
font-size: 20px;
left: 25px;
position: absolute;
top: 0;
}
body {
font-size: 20px;
}
button.hover,
.button:hover {
text-decoration: none;
background-color: rgba(189, 189, 189);
border: 1px solid #bdbdbd;
}
.fix .svg-outline-icon {
color: rgba(189, 189, 189);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
user-select: none;
vertical-align: middle;
text-decoration: none;
color: inherit;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 3px 9px;
border-radius: 4px;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border: 1px solid rgba(189, 189, 189, 0.5);
color: #bdbdbd;
color: #333;
background-color: #fff;
min-width: auto;
margin-left: 8px;
}
.box {
padding: 20px;
margin: 10px;
border: 2px dotted #333;
}<div class="box">
example: (hover over this button):
<button class="button" type="button">
<div class="root">
<svg class="svg-bottom-icon" viewBox="0 0 24 24">
<path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
<svg class="svg-outline-icon" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
<svg class="svg-top-icon" viewBox="0 0 24 24" data-testid="AddIcon">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
</div>
</button>
</div>
<div class="box">
goal: <br/> this hovered state:
<button class="button hover" type="button">
<div class="root">
<svg class="svg-bottom-icon" viewBox="0 0 24 24">
<path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
<svg class="svg-outline-icon" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
<svg class="svg-top-icon" viewBox="0 0 24 24" data-testid="AddIcon">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
</div>
</button>
<br/>
should inherit background color:
<button class="button hover fix" type="button">
<div class="root">
<svg class="svg-bottom-icon" viewBox="0 0 24 24">
<path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
<svg class="svg-outline-icon" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
<svg class="svg-top-icon" viewBox="0 0 24 24" data-testid="AddIcon">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
</div>
</button>
</div>