This repo includes a few handy things:
- A single state-svg-defs.svg file, providing easy access to all icons in one simple file.
- SVG directory with individual SVG icons. (SVG defs approach recommended, but you could also include files from here individually).
- Docs demonstrating svgdefs implementation.
Check out the demo here.
Include the contents of state-svg-defs.svg in your HTML file. It needs to be included at the top of your document (or at least before you reference an icon). I recommend including it directly after the opening <body> tag.
Ways to include:
Copy the entire contents of state-svg-defs.svg and paste it after your document's opening <body> tag.
or
Copy the contents into a partial and include it after your document's opening <body> tag.
PHP: <?php include('partials/state-svg-defs.php'); ?>
Rails: <%= render 'partials/state-svg-defs' %>
You've already done the hard part. Using the icons is super easy!
Paste this SVG xlink snippet where the icon should appear:
<svg class="icon icon-state-MO">
<use xlink:href="#icon-state-MO"></use>
</svg>For best results, include the following CSS in your main stylesheet:
.icon {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}Now you can style the icons easily by setting the color on their parent element.
For example, if the icon is wrapped in a div with a class of .state ...
<div class="state">
<svg class="icon icon-state-MO">
<use xlink:href="#icon-state-MO"></use>
</svg>
</div>... you could make the icon red using the following css:
.state {
color: red;
}... and you could animate the color on hover like this:
.state {
color: red;
transition: 500ms color;
}
.state:hover {
color: pink;
}Easy!
The original icons were designed by ProPublica and provided as an icon font.
I simply converted them to the (more modern) svgdefs format.
Kudos to ProPublica for the original work!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent