Cli: can't load all svg files if there are subfolders

[ilterra]

Hi,
here's the command I'm using:

svg-sprite --config svg-sprite.dev.json ./sprite/svg/**/*.svg

Here's the configuration:

{
    "dest": "build-dev",
    "log": "verbose",
    "shape": {
        "meta": "sprite/data/metadata.yml"
    },
    "mode": {
        "symbol": {
            "dest": "sprite",
            "sprite": "icons.svg"
        }
    }
}

And here's my folder structure. There are 2 icons in svg folder, and two in the subfolder group.

+-- sprite
|   +-- data
|   +-- svg
|   |   +-- group
|   |   |   +-- test1.svg
|   |   |   +-- test2.svg
|   |   +-- sample1.svg
|   |   +-- sample2.svg

The script seems to ignore the icons in the svg folder, and only load the ones in group. If I remove the group folder, it correctly loads the icons in svg folder.

Versions:
svg-sprite: 1.3.6
node: 7.5.0

Thanks for all the work!
Alberto

[ilterra]

I updated the command with quotes for the input:

svg-sprite --config svg-sprite.dev.json './sprite/svg/**/*.svg'

Now the icons are all loaded correctly.

I tried to add two icons with the same name (sample1.svg), one in svg folder and one in group folder.

+-- sprite
|   +-- data
|   +-- svg
|   |   +-- group
|   |   |   +-- sample1.svg
|   |   |   +-- test2.svg
|   |   +-- sample1.svg
|   |   +-- sample2.svg

The script seems to generate two symbols with the same id. I guess the id of the icon in group folder should be something like group--sample-1, correct?

Thanks
Alberto

[jkphl]

@ninjabachelor Well, the first part of your question is easily explained (and partly unrelated to svg-sprite): Without the quotes around ./sprite/svg/**/*.svg, your shell will perform the globbing, and it doesn't seem to like the ** in your expression. When you're putting quotes around the expression, it will be passed to svg-sprite as a string argument, letting Node's more advanced glob do the job (with somewhat more success).

Your second question might be a little more tricky. In general, the relative file path should be used for creating the shape ID, defaulting to a simple algorithm that basically replaces slashes with double dashes. For instance, the file sprite/svg/group/sample1.svg should become an icon named sprite--svg--group--sample1. You may override the default algorithm by setting the shape.id.generator option. This usually works fine for the API usage, but to be honest I probably never tried it with the CLI version. I'd ask you to try to get a grip on this, and if you still encounter problems then please let me know. Thanks!

[ilterra]

Thanks @jkphl !
I've made a couple of tests. With the above configuration and folder structure, I obtain a sprite with 4 symbols, but with one duplicated id (sample1):

<symbol id="sample1" ...>
<symbol id="sample1" ...>
<symbol id="sample2" ...>
<symbol id="temp1" ...>

I've created a grunt config with the same settings, and it generates 4 symbols but with no colliding ids:

<symbol id="sample1" ...>
<symbol id="group--sample1" ...>
<symbol id="sample2" ...>
<symbol id="group--temp1" ...>

Is there something missing in my cli configuration? Or it could be a cli script issue?

Thanks again,
Alberto

[dhruvio]

Hi there,

I'm noticing the same issue with the CLI -- when using a glob pattern like **/*.svg, svg-sprite only recognises <basename>.svg without the relative path, so the ID is not namespaced using directory traversal. Is there a way around this to enable ID namespacing?

Thanks!

[jkphl]

I added a simple option to set a "base directory" for globbing that should help you. Please let me know if it doesn't!

[elina-codes]

Hey @jkphl, I'm trying to run this from CLI in my npm build script. I've surrounded the path for the last argument in single quotation marks but nothing happens (stylesheet and spritesheet are both empty). Any ideas?

[jkphl]

@elina-codes, could you please post your complete CLI command here? Thanks!

[elina-codes]

"sprites": "svg-sprite --css --cscss --css-prefix=.re-svg-%s --css-dest=assets/src/css/stylesheets --css-sprite=../../images/spritesheets/spritesheet-main.svg --css-render-scss-dest=../../sass/partials/_sprites 'testsprite.svg'",

It's the final argument in the '' that is causing me trouble. When I remove the quotes, it works fine. My final command will be using globbing, but I've found that even this simple test results in the same problem.

Thanks for your help @jkphl !

[azerafati]

This isn't working for me:
when I run svg-sprite --config svg-sprite.conf.json 'src/assets/svg-icon/./**/*.svg' as suggested, my sprite is empty. But when I remove ./ and the quotes I get all the svg files in my sprite BUT with no ID traversal and if I only remove the quotes I get an error:

Error [ArgumentError]: SVGSpriter.add: "dc/test.svg" is not the local part of "E:\dev\example\src\assets\svg-icon\dc\test.svg"
    at SVGSpriter.add (E:\dev\example\node_modules\svg-sprite\lib\svg-sprite.js:123:21)

I'm not sure but could it be related to running this on windows?