How to bundle multiple svg icons into 1 file?

Question

I'm looking for a script that will take many .svg icons files and bundle them into one file, so that the structure inside will be as follows:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 32 32" id="active-directory">
        <path d="M15.944..."
              fill-rule="evenodd"/>
    </symbol>
    <symbol viewBox="0 0 32 32" id="add">
        <path d="M2..."
              fill-rule="evenodd"/>
    </symbol>
</svg>

Does such a tool exist, or do I have to write it on my own?

Answer 1

Yes there are tools to bundle icons

Check the following if you are using gulp: https://github.com/w0rm/gulp-svgstore

And this if you are using grunt: https://github.com/FWeinb/grunt-svgstore

Answer 2

There are tools which can be integrated into your workflow to realize this. For gulp there is in example gulp-svg-sprite