Svgo: How do parse all *.svg files in a directory recursively?

[lipis]

If I have the following structure:

/path/to/svg/
├── foo
│   ├── far
│   │   └── away.svg
│   ├── bar.svg
│   └── cafe.svg
└── car.svg

• svgo -f /path/to/svg/ fixes only the car.svg
• svgo -f /path/to/svg/* fixes all the files in foo directory but not car.svg and not the far folder

So the question is.. what's the best way to scan all the *.svg recursively in a folder?

[waldyrious]

In the spirit of Unix philosophy, I'd be inclined to propose using find for locating the files, and svgo for processing them. Something like find /path/to/svg/ -name *.svg -exec svgo {} \;.

That said, given that the -foption already exists, it could be argued that it makes sense to extend it to process folders recursively.

[lipis]

Yes that will work only in Unix systems..and if I want to use it inside the package.json as a script it won't fly on every platform.. the -f should be fixes to support all.

Or maybe even something like that

• svgo /path/to/svg/**/*.svg would parse all the files recursively inside that match the *.svg extension.
• svgo /path/to/svg/*.svg only in the root of that folder without going deeper and only the *.svg files.

[DavidBruchmann]

No clue how the possibilities are with installed git-bash in windows, there are some linux-commands like grep and find available too. Should be possible to combine that but add another dependency ...
I know this is probably not the way to go but just thought about it.

[lipis]

We all know the workarounds guys... let's just fix it! The question was mostly on how to do it without workarounds and if not possible.. it's a feature request.

[caub]

how is this related to svgo?

else just do it sync like

function listSvgs(dir){
    var items = fs.readdirSync(dir),
            files = [];
    for (var item of items){
        var path = path.join(dir, item);
        if (fs.statSync(path).isDirectory())
            files.push(...listSvgs(path));
        else if (path.endsWith('.svg')
            files.push(path);
    }
    return files;
}

[lipis]

It is realted to svgo because svgo supports -f

[caub]

so if you're motivated, extend this https://github.com/svg/svgo/blob/master/lib/svgo/coa.js#L49 with a -rf option (r for recursive) and paste the code above to get all .svg's.

I don't need that recursive feature personally, so feel free to make a PR

[lipis]

Thanks a lot @caub for the advice man.. I didn't know that I was aloud to make my own PRs..

[caub]

you're very aloud to

[lipis]

Thanks again man..! I'll keep that in mind..

[mnpenner]

I would like to see this built-in to SVGO too, but in the mean-time, here's a workaround that runs SVGO in parallel:

find resources/icons -type f -name '*.svg' -print0 | xargs -0 -n 1 -P 6 svgo

Or, since svgo can already process directories, just not recursively, we can process all leaf-dirs like so:

find src/icons -type d -links 2 -print0 | xargs -0 -n 1 -P 6 npx svgo --config=svgo.yml

[mnpenner]

Thanks for adding this feature. Could you tag this release please? @justrhysism

[mnpenner]

Actually the output is a little weird. It says

No SVG files have been found.

...even though it did find all my icons. I guess it didn't find any in the root dir.

node_modules/.bin/svgo -r resources/icons
Processing directory 'resources/icons':

Processing directory '/mnt/c/Users/Mark/PhpstormProjects/myproject/resources/icons/fa':

Processing directory '/mnt/c/Users/Mark/PhpstormProjects/myproject/resources/icons/ion':

Processing directory '/mnt/c/Users/Mark/PhpstormProjects/myproject/resources/icons/misc':

No SVG files have been found.
asterisk.svg:
Done in 14 ms!
0.497 KiB - 0% = 0.497 KiB

android-calendar.svg:
Done in 6 ms!
0.316 KiB - 0% = 0.316 KiB

account.svg:
Done in 9 ms!
0.948 KiB - 0% = 0.948 KiB

...

[averyvery]

Excited about this change, does it seem like it'll be in a release soon?

[ranuss]

When will this be released?

[iafiawik]

Agree. This would be a much appreciated feature. 🙂

[keithws]

Is this dead? Will this ever be released?

[Pomax]

I hope so, because find and xargs are not available on Windows, making the workaround "not a solution" when it comes to using svgo in npm scripts.

[michtoen]

I did not find it written elsewhere, but today it is simple, also on windows

svgo -o /PATH/TO/OUTPUT/DIR/ -f /PATH/TO/INTPUT/DIR/ -i *.svg

will also create the output if it did not exits.

[Pomax]

This is now part of the "with files" documentation in the https://github.com/svg/svgo#usage section.

[bashjs]

-f and -r both still don't work with paths like packages/**/static/next/icons. svgo takes only the first matched folder.
Possible workaround: svgo $(echo packages/**/static/next/icons) -r

[Pomax]

Those aren't paths, those are globs - many tools don't support globs, so if you want glob support, you should probably file a feature request issue instead of commenting on a closed issue.