Summary - Icon set
Build an icon set with SVG.
Summary: an icon set with SVG
In this group you saw how SVG is styled. fill sets the inside color, stroke the edge color, stroke-width the edge thickness. These are CSS's core SVG tools.
You animated icons with :hover and bound them to text color with currentColor. Now you will combine these and build a consistent icon set.
Exercise Style the first icon
Inside .icon-home, write two declarations: set fill to #0f172a and stroke to #475569. The icon's inside becomes dark, its edge light gray.
Show example solution
open .icon-home; write fill: #0f172a; and stroke: #475569; inside.
Example solution:
.icon-home {
fill: #0f172a;
stroke: #475569;
}currentColor and hover together
Combining the two tools gives you a powerful pattern. You bind the icon to the text color with fill: currentColor; then you write .icon-home:hover { color: #2563eb }. On hover the text color turns blue; the icon follows.
In this pattern only color changes; you don't rewrite fill. One point of control reaches the whole icon set.
Exercise Build the icon set
Write two declarations: inside .icon set fill: currentColor; inside .icon:hover set color: #2563eb. All icons follow the text color and turn blue on hover.
Show example solution
inside .icon write fill: currentColor; inside .icon:hover write color: #2563eb;.
Example solution:
.icon {
fill: currentColor;
}
.icon:hover {
color: #2563eb;
}Test yourself
-
How does currentColor work on hover?
- fill is rewritten each time
- color changes, the icon follows
- stroke does not change automatically
- hover ignores currentColor
Show answer
color changes, the icon follows — Correct! When color changes, currentColor follows; no need to rewrite fill.