svg-sprite/gulp-svg-sprite

Change classname in scss: remove folder name

GCour opened this issue · 5 comments

GCour commented

Is it possible to change the class that is generated? At the moment it creates:
prefix_folderName--svgName

for example:

ic_common--arrow
ic_app--calendar

I want to remove the foldername 'common--' and 'app--'

jkphl commented

@GCour I currently don't have any capacity for working on issues, unfortunately. But have you already had a thorough look at the shape ID generation section in the docs? Didn't writing a custom shape.id.generator implementation work?

GCour commented

@jkphl Thanks for the answer, that does direct me in the right direction, however when I add name and file as parameters, it doesn't recognise it..

 shape: {
            id: { // SVG shape ID related options
                separator: '-', // Separator for directory name traversal
                generator: generateClassName(name, file), // SVG shape ID generator callback
                pseudo: '~', // File name separator for shape states (e.g. ':hover')
                whitespace: '_' // Whitespace replacement for shape IDs
            }
        }

function generateClassName(name, file) {
    console.log(name, file);
    return "name";
}
jkphl commented

@GCour If I don't misinterpret your snippet, you shouldn't call the generator function already as part of your config. Should look like:

shape: {
    id: {
        generator: generateClassName
    }
}
GCour commented

It works! Thanks for your time

For others:

    config = {
        shape: {
            id: { // SVG shape ID related options
                separator: '-', // Separator for directory name traversal
                generator: generateClassName, // SVG shape ID generator callback
                pseudo: '~', // File name separator for shape states (e.g. ':hover')
                whitespace: '_' // Whitespace replacement for shape IDs
            }
        }
    };

function generateClassName(name, file) {
    let nameXT = name.split('/', 2);
    let nameNoXT = nameXT[1].substring(0, nameXT[1].lastIndexOf('.'));;
    return nameNoXT;
}

Thank you! I needed to do this too.