This will seem like a WTF, ZOMG, why is this so difficult, but its just a few easy steps between you and icon nirvana. Note this is just how I do it, it may not be, and is likely not, the best, but when I need an icon or two for use its what I do. There are some tools to pull entire font sets to SVG, search for font ripper on github for inspiration
A quick guide for how to use / add SVG icons to ElkArte 1.1
Selection your Icon(s)
- Go to IcoMoon App This app has a large collection of free (and pay for) icon sets from which you can choose.
- Select "Add Icons From Library" and choose the icon library(s) that you want to work with. For example I keep three (3) sets in my working project :: Font Awesome, Material Icons and Icomoon free (ElkArte uses many from the Icomoon free set)
- Find the icon or icons that you like. Using search will search inside of all the sets and return "smart" results. For example searching on bookmark will get bookmark, stars, hearts, etc which helps with some creativity.
- Select a bookmark icon you like, I choose the single one form the Icomoon set for this write up. At the screen bottom select "Generate SVG and More" button
- At the top of this page you must set the size of the icon, generally the icons used are 32px. so use that
Damit, I want my icon now method
- Hover over your icon image, and select "get code"
- Copy the section the says "Symbol Definition" in this example it should be as follows
<symbol id="icon-bookmark" viewBox="0 0 32 32"><title>bookmark</title><path d="M6 0v32l10-10 10 10v-32z"></path></symbol>
- Go to Encode SVG SCSS and agree with Cartman
- Paste the above code into the textbox that syas "Past SVG code here"
- It will be converted and highlighted so you can copy it again, Now it looks like
background-image: url("data:image/svg+xml,%3Csymbol id='icon-bookmark' viewBox='0 0 32 32'%3E %3Ctitle%3Ebookmark%3C/title%3E %3Cpath d='M6 0v32l10-10 10 10v-32z'%3E%3C/path%3E %3C/symbol%3E");
- Open your CSS file and add it as a new icon BUT change the generated background-image: to content: as follows
.i-bookmark::before {
content: url("data:image/svg+xml,%3Csymbol id='icon-bookmark' viewBox='0 0 32 32'%3E %3Ctitle%3Ebookmark%3C/title%3E %3Cpath d='M6 0v32l10-10 10 10v-32z'%3E%3C/path%3E %3C/symbol%3E");
}
- Use it in your markup as <i class="icon i-bookmark"></i>
Damit, I want my icons to be optimized method
- Instead of using "get code" select "Download SVG" at the botton of the page BUT first select the gear icon next to the download button and make sure override size is set to 32 or whatever size you needed. You can also select other formats, but we only want the SVG version so I de-select the rest.
- Open the downloaded file, naviate to the SVG folder, open the svg file in your text editor and copy all of that markup. In this example it should be as follows:
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>bookmark</title>
<path d="M6 0v32l10-10 10 10v-32z"></path>
</svg>
- Go to SVGOMG! and select "Paste Markup" and paste the above. Alternatively you can skip use open SVG and select the SVG icon you downloaded from above, skipping the copy / paste method.
- You will now see the icon in the editor, if you don't you mussed up!
- Select the optimizations you want, the defaults are fine but also select "Multipass", "Remove Title", "Prefer viewbox to width/height"
- Select the markup tab and copy your new optimized SVG code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M6 0v32l10-10 10 10V0z"/></svg>
- Go to Encode SVG SCSS and nod to Cartman
- Paste the above code in the "Paste SVG code here" textbox and copy the results which will magically replace what you just pasted.
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 0v32l10-10 10 10V0z'/%3E%3C/svg%3E");
- Open your CSS file and add it as a new icon BUT change the above background-image: to content: as follows
.i-bookmark::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 0v32l10-10 10 10V0z'/%3E%3C/svg%3E");
}
- Use it in your markup as <i class="icon i-bookmark"></i>
You can change colors, fills, weights, etc ... if wanted I can to a short write up on that as well.