ElkArte Community

Quick Guide to SVG icons.

For best results this is a 3 step process, of course step one is admit you have a SVG problem.

Overall this is a fast process once you have done it a few times, so although this may look like a lot of work, its not but its more cumbersome that the FA way.  I'm not saying this is the only way, or even a good way, its just a way that I've used.

• Navigate to https://icomoon.io/app/#/select (https://icomoon.io/app/#/select) They have many "collections" to choose from, most of the default ones in ElkArte are from icoMoon-Free but you can choose from a wide variety of other free packs.
• Select the icon(s) you want to add, search is a big help
• At the bottom of the page, select "Generate SVG and more"
• On the SVG page, I like to set the size to 32px (top right corner), you can set any size really.
• Select Download.  Optionally you can edit what formats are included in the download, we only need the SVG
• Extract the zip file somewhere

Next we want to compact the SVG as much as we can so it takes as little room as possible in our CSS style sheet

• Goto https://jakearchibald.github.io/svgomg (https://jakearchibald.github.io/svgomg)/
• Open one of the SVG files that you downloaded, you should see its image in the app with the % of original size shown.  Feel free to adjust the various settings to get it as compact as you want while not loosing significant detail.
• Select the "markup"  tab and copy all of the SVG markup.  Hint don't use "ctrl+a" but instead use the mouse to select the markup text.  If you don't what happens is extra comment code gets added to the clipboard which kind of defeats the purpose of compacting!

Now we need to encode the SVG so we can use it directly in our CSS style sheet.

• Goto https://codepen.io/jakob-e/pen/doMoML (https://codepen.io/jakob-e/pen/doMoML)
• Paste the SVG markup into the box below the cartman image... sweeet
• The pasted SVG will be changed on the fly, in the same box you pasted it in.  Its already highlighted for you, just copy it.
• Open your css file and add a new style and paste the code in there, it will look something like the following, using whatever name you want

.i-newicon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M61.657 2.343a8 8 0 00-11.314 0L39.586 13.1 32 5.514l-8.485 8.485 6.652 6.652L.66 50.158a2.245 2.245 0 00-.644 1.841H.001v10a2 2 0 002 2h10.25c.576 0 1.152-.22 1.591-.659l29.507-29.507 6.652 6.652L58.486 32 50.9 24.414l10.757-10.757a8 8 0 000-11.314zM10.818 60H4v-6.818l29.348-29.348 6.818 6.818L10.818 60z'/%3E%3C/svg%3E");
}

Lastly and importantly change the "background-image" to instead say "content"  ... Boom Done ...  Now you can use it in your theme as

<i class="icon i-newicon"></i>

If you want to change the color, just add the keyword fill='' to the SVG definition, like fill='green' or if you want to use a specific hex color its fill='%23539442' .. that %23 is hex code for # so use %23 and then your 6 digit color hex code, here it was 539442  Here is an example.

.i-newicon::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23539442' viewBox='0 0 64 64'%3E%3Cpath d='M61.657 2.343a8 8 0 00-11.314 0L39.586 13.1 32 5.514l-8.485 8.485 6.652 6.652L.66 50.158a2.245 2.245 0 00-.644 1.841H.001v10a2 2 0 002 2h10.25c.576 0 1.152-.22 1.591-.659l29.507-29.507 6.652 6.652L58.486 32 50.9 24.414l10.757-10.757a8 8 0 000-11.314zM10.818 60H4v-6.818l29.348-29.348 6.818 6.818L10.818 60z'/%3E%3C/svg%3E");
}

Some icons don't really have a fill, you can instead try stroke as in stroke='grey' stroke-width='0.07em' as with fill you can use %23 and a 6 digit hex color as in this example

.i-newicon::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='grey' stroke-width='0.07em' viewBox='0 0 64 64'%3E%3Cpath d='M61.657 2.343a8 8 0 00-11.314 0L39.586 13.1 32 5.514l-8.485 8.485 6.652 6.652L.66 50.158a2.245 2.245 0 00-.644 1.841H.001v10a2 2 0 002 2h10.25c.576 0 1.152-.22 1.591-.659l29.507-29.507 6.652 6.652L58.486 32 50.9 24.414l10.757-10.757a8 8 0 000-11.314zM10.818 60H4v-6.818l29.348-29.348 6.818 6.818L10.818 60z'/%3E%3C/svg%3E");
}

One of those two will change the color for you, sometimes you can even use both, just depends on the icon.

I wish I can bookmark this.

Why can't you? Browsers do bookmarks. ;)

@Spuds: thread title has teh tpyo.

I got curious about what a bloke might do if he was bored with everything having to be "flat design" these days. Turns out you can sort it.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient

https://www.sitepoint.com/getting-started-svg-gradients/

This looks handy too: https://css-tricks.com/cascading-svg-fill-color/

Typo fixed :D 

Not preferred for various reasons. A forum should have its own bookmark ability.

I wanted to post a quick bit of info that may help you out. 

When using the SVGOMG app to compress the svg data, the default settings are fine but you should also enable the "prefer viewbox to width height"   This will replace witdth='36' height='36' with viewbox'0 0 36 36' in your SVG content.

Doing that ensures that the inline SVG will react as expected.  Meaning when you set a width and height in your CSS, the SVG it will scale as expected.  If you leave the width and height in the SVG content you will be in for a fight.

Just bookmark it in your browser? :)

@Spuds thank you for the guide! It's much appreciated.

I already answered that.

An alternative site to use to encode the SVG so it can be used inline is https://yoksel.github.io/url-encoder/ You can use that site in place of the one I listed in the tutorial.  Its been my go to one since I found it, but use what you like, the results are the same.