SVG Export and CSS Formatting

[jackfearing]

Hello, I'm currently the gulp structure below (also attached) for my SVG icon system and have it exporting out to a php file to include in the head of Wordpress so I can use SVG's on the page.

For the most part everything works great however when I try to apply a hover: class to change the SVG fill, I'm not able to change the fill. I can change the fill if I use but not on hover. I assuming it's because of the path after the #ID.

Is there a better way I should be exporting my SVG or have my GULP file setup? The goal is to use symbol for my SVG's.

CSS

svg #pin path {
    fill:deepskyblue;
}

PHP

<div><svg><use xlink:href="#pin"/></use></svg></div>

Gulp

// SVG:
// Basic configuration example for SVG Sprite
var config                  = {
    shape               : {
        dimension       : {              
            maxWidth    : 32,           
            maxHeight   : 32,       
            precision   : 2,           
            attributes  : true,     
        },
        spacing         : {       
            padding     : 0,         
            box         : 'content'  
        },
        dest            : 'intermediate-svg'    
    },
    svg                     : {                          
        xmlDeclaration      : false,                     
        doctypeDeclaration  : false,                    
        namespaceIDs        : true,                    
        dimensionAttributes : true,                  
        rootAttributes: {
            width: 0,
            height: 0,
            style: 'position:absolute; background:none !important'
        },
    },
    mode                : {
        view            : {        
            bust        : false,
            render      : {
                scss    : true      
            }
        },
        css             : {
            example     : true
        },
        inline              : true,
        symbol          : true    
    }
};

// Build SVG sprites and move to build folder
gulp.task('svgSprite', function() {
    return gulp.src('assets/svg/*.svg')
        .pipe(svgSprite(config))
        .pipe(gulp.dest('assets/build/svg'))
        .pipe(notify({ message: 'SVG task complete'}));
});

// Images: Removes images not in src folder
gulp.task('cleanSVG', function(){
  del(['assets/build/svg/**/*', '!assets/svg', '!assets/svg/**/*'])
});

// Rename and create symbols php file
gulp.task('rename', function() {
    return gulp.src('assets/build/svg/symbol/svg/*.svg')
        .pipe(rename({
            basename: "svg",
            suffix: "-symbols",
            extname: '.php'
    }))
    .pipe(gulp.dest('parts'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Rename task complete'}))
});

Gulp-SVG.txt

[jkphl]

Hi @jackfearing, if I understand your issue correctly this is not a problem that's related to svg-sprite / gulp-svg-sprite or the construction of the sprite. It's rather a limitation of current SVG support in browsers that you cannot apply arbitrary CSS on SVG elements that are <use>d. I'm pretty sure your hover code would work if your SVG was truly inlined (without the use of <use>).

Under certain circumstances there might be a solution for your special problem though, using currentColor in your CSS. Please see here for a description of the technique. Good luck!

[jackfearing]

Thanks for the quick response. Just a follow-up question. If I wanted to use an inline svg icon based the export gulp code. What would be the markup if I don't use the <use>tags?

Example: How would I get this to display? <svg class="notification"><use xlink:href="#notification"/></svg>