0

I want an alternative to font icons. So I decided to create SVG icons. I'm using Grunt and https://github.com/jkphl/grunt-iconizr. Everything works fine. There are my output SCSS files using Grunt Iconizr:

First

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        @extend %icon;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2223.90625%22%20viewBox%3D%220%200%20512%20510%22%20enable-background%3D%22new%200%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20275.311l151.114-150.395%2054.886%2055.148-206%20205.02-206-205.02%2054.887-55.148z%22%2F%3E%3C%2Fsvg%3E");
    }

Second output file, an alternative to first file: 

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        background-position: 0 0;
        @extend %icon;
        background-image: url(icons/icons.svg);
    }

I want to create hover effect on icons. Is there any way how can I do an hover effect using pure CSS solution? I know that I can do that using fill: #CCC; property ... but only if have SVG in my HTML code. If I use font icons, it can be done easily by changing CSS color property. Is there any way hove can I change a color of SVG attached by background-image: url(...)?

Martin Pešout
  • 47
  • 1
  • 7
  • Using inline svg, you can put a class name on any part of the SVG file and change color etc for just that one part of it. Check this out: http://css-tricks.com/using-svg/ – Michael Jun 30 '14 at 13:04
  • But in this case I won't be able to create my "icons pack" and use icons only by adding CSS class to HTML element. Do you think that there is no different solution? – Martin Pešout Jun 30 '14 at 13:08
  • 1
    That is correct, by adding the SVG as a file in CSS, you are using it as a file, rather than as code. If your SVG is a solid color, and you want the hover state to be a simple change in the shade of the color, you could sort of fake a color change by changing the opacity. Alternatively, since you are already creating a "sprite pack" you could include the "hover states" of the icons in the pack itself, and change the background-position on hover to display the different icon. – Michael Jun 30 '14 at 13:12

1 Answers1

0

You could add an opacity value on hover:

.icon-arrow-down:hover { 
    opacity: 0.5;
}
Kai Feller
  • 653
  • 3
  • 14
  • Yeah Kai, it could be a solution. But unfortunately I need to have one icon in two colors on the page by default. For example some arrow. I can have it with white in the header and black in the rest of the page. I'm still thinking that using font-icons will be the best solution in this case, rather than using SVG icons. – Martin Pešout Jun 30 '14 at 13:42
  • When you use SVG as an image you can't change the contents of the image in any way. You're going to need one icon for each state therefore if you use images. – Robert Longson Jun 30 '14 at 13:55