Bulma: Universal SVG Icon Support

[nedpals]

This is about Bulma.

Is it about Bulma or about the Docs? Bulma
Is it a bug/feature/question or do you need help? Enhancement of a feature
If it's a bug, is it a browser bug? Nope.

Overview of the problem

This is about the Bulma CSS framework
I am sure this issue is not a duplicate

Description

I am using a specific SVG icon stack (feathericons/feather) and having a workaround for margin is fine for me. But the problem is that they don't scale in let's say in this example the input fields wherein if I set the field is-large the SVG icon does not scale. The question is, will there be an official support for all SVG icons aside from Font Awesome 5?

Expected behavior

Actual behavior

[AdsonCicilioti]

Hello @nedpals !
Feather Icons are beautiful, I use and recommend. So I recommend using SVG icons. I'm new here and I have not yet seen how Bulma handles icons from another library, but I'll try to help.

Here I use the following CSS markup for <svg> containing the class icon:

[class*=" icon"], [class^=icon] {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    line-height: 1;
    position: relative;
    top: -.05em;
    vertical-align: middle;
}

In this way the icon will have its size defined by the font-size inherited by the parent element, being able to be in a button, an input form, or simply in line in any text. And if you need it to be anywhere else in a devious way and need to set a size to the svg icon directly just use `font-size '.

Remember that feather-icons are based on strokes and you might have to set fill tonone;

Good job. I hope it helps!

[Grovkillen]

I needed to remove this part for it to not fill the compass (which was the first icon I tried).

        stroke-width: 0;
        stroke: currentColor;
        fill: currentColor;
        line-height: 1;

[Grovkillen]

okay I made it this way...

The HTML:

<a href='#/home' class='' title='Getting Started'>
    <span class='icon'>
        <li>
            <object class='icon' data='icons.svg#cloud'></object>
            <span>Getting Started</span>
        </li>
    </span>
</a>

the multi icon svg file:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">

    <g id="rain">
        <path fill="none" d="M24,6c-0.375,0-0.733,0.062-1.104,0.111C21.508,3.646,18.928,2,16.001,2c-2.987,0-5.565,1.666-6.94,4.101
            C8.708,6.054,8.355,6,8.001,6c-4.41,0-8,3.589-8,8.001s3.59,8,8,8H24c4.414,0,8-3.588,8-8S28.414,6,24,6z M24,18.001H8.001
            c-2.207,0-4-1.795-4-4c0-2.193,1.94-3.886,4.004-3.945c0.009,0.943,0.172,1.869,0.5,2.744l3.746-1.402
            c-0.168-0.444-0.25-0.915-0.25-1.396c0-2.205,1.793-4.001,4-4.001c1.293,0,2.466,0.642,3.199,1.64
            c-1.928,1.461-3.199,3.756-3.199,6.361h4c0-2.205,1.796-4,3.999-4c2.211,0,4,1.795,4,4S26.211,18.001,24,18.001z M3.281,29.439
            c-0.75,0.75-1.969,0.75-2.719,0s-0.75-1.969,0-2.719s5.438-2.72,5.438-2.72S4.031,28.689,3.281,29.439z M11.286,29.439
            c-0.75,0.75-1.965,0.75-2.719,0c-0.751-0.75-0.751-1.969,0-2.719c0.754-0.75,5.438-2.72,5.438-2.72S12.04,28.689,11.286,29.439z
             M19.281,29.439c-0.75,0.75-1.969,0.75-2.719,0s-0.75-1.969,0-2.719S22,24.001,22,24.001S20.031,28.689,19.281,29.439z"/>
    </g>
    <g id="cloud">
        <path fill="none" d="M24,6c-0.375,0-0.733,0.062-1.104,0.111C21.508,3.646,18.928,2,16.001,2c-2.987,0-5.565,1.666-6.94,4.101
            C8.708,6.054,8.355,6,8.001,6c-4.41,0-8,3.589-8,8.001s3.59,8,8,8H24c4.414,0,8-3.588,8-8S28.414,6,24,6z M24,18.001H8.001
            c-2.207,0-4-1.795-4-4c0-2.193,1.94-3.886,4.004-3.945c0.009,0.943,0.172,1.869,0.5,2.744l3.746-1.402
            c-0.168-0.444-0.25-0.915-0.25-1.396c0-2.205,1.793-4.001,4-4.001c1.293,0,2.466,0.642,3.199,1.64
            c-1.928,1.461-3.199,3.756-3.199,6.361h4c0-2.205,1.796-4,3.999-4c2.211,0,4,1.795,4,4S26.211,18.001,24,18.001z"/>
    </g>
    <g id="sun">
        <path fill="none" d="M16.001,12c2.203,0,4,1.795,4,4s-1.797,4-4,4s-4-1.795-4-4S13.798,12,16.001,12 M16.001,8c-4.418,0-8,3.582-8,8
            s3.582,8,8,8S24,20.418,24,16S20.419,8,16.001,8L16.001,8z M14,2c0,1.104,0.896,2,2,2s2-0.896,2-2s-0.896-2-2-2S14,0.896,14,2z
             M4,6c0,1.104,0.896,2,2,2s2-0.896,2-2S7.104,4,6,4S4,4.896,4,6z M2,14c1.105,0,2,0.895,2,2c0,1.107-0.895,2-2,2s-2-0.893-2-2
            C0,14.895,0.895,14,2,14z M4,26c0,1.104,0.896,2,2,2s2-0.896,2-2s-0.896-2-2-2S4,24.896,4,26z M14,30c0-1.109,0.895-2,2-2
            c1.108,0,2,0.891,2,2c0,1.102-0.892,2-2,2C14.895,32,14,31.102,14,30z M24,26c0,1.104,0.896,2,2,2s2-0.896,2-2s-0.896-2-2-2
            S24,24.896,24,26z M30,18c-1.104,0-2-0.896-2-2c0-1.107,0.896-2,2-2s2,0.893,2,2C32,17.104,31.104,18,30,18z M24,6
            c0,1.104,0.896,2,2,2s2-0.896,2-2s-0.896-2-2-2S24,4.896,24,6z"/>
    </g>

    <script>document.getElementById(location.hash.substring(1)).getElementsByTagName('path')[0].setAttribute('fill', '#ccc');</script>

</svg>

the output:

added the suggested extra code in style:

<style>[class*=" icon"], [class^=icon] {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    line-height: 1;
    position: relative;
    top: -.05em;
    vertical-align: middle;
    }
</style>

Inspired by this: https://codepen.io/NielsOeltjen/pen/uCgLI

[AdsonCicilioti]

@Grovkillen Yep!

This css trick works for both SVG sprite icons and individually embedded svg icons, as long as it does not have the line-stroke,fill, width andheight attributes in <svg>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.