How to combine a part of multiple files to one file with Bash

Question

I have the following structure. Each directory has files with the same name but the contents are different.

lib- 
    |-filled
            |-A1K_plus.svelte
            |-A1K.svelte
            |- // more files
    |-outlined
            |-A1K_plus.svelte
            |-A1K.svelte
            |- // more files
    |-round
            |-A1K_plus.svelte
            |-A1K.svelte
            |- // more files
    |-sharp 
            |-A1K_plus.svelte
            |-A1K.svelte
            |- // more files

For example filled/A1K_plus.svelte has the following content:

<script>
    export let size = '24';
    export let color = 'currentColor';
    export let ariaLabel = '1k_plus';
</script>

<svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    fill={color}
    class={$$props.class}
    {...$$restProps}
    aria-label={ariaLabel}
    viewBox="0 0 24 24"
    ><path
        d="M19 // removed for brevity"
    /></svg
>

And outlined/A1K_plus.svelte has the following content.

<script>
    export let size = '24';
    export let color = 'currentColor';
    export let ariaLabel = '1k_plus';
</script>

<svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    fill={color}
    class={$$props.class}
    {...$$restProps}
    aria-label={ariaLabel}
    viewBox="0 0 24 24"
    ><path
        d="M19 3H5c-1.1 // removed for brevity"
    /><path
        d="M7.5 15H9V9H // removed for brevity"
    /></svg
>

And so on. Some have path tag one and others have two path tags between svg tags.

Now I want to combine all the files to create following for each files.

<script lang="ts">
    export let size = '24';
    export let color = 'currentColor';
    export let ariaLabel = '1k_plus';
    export let variation = 'filled';
    let svgpath: string;
    switch (variation) {
        case 'filled':
            svgpath =
                '<path d="M10 10.5h1 // path from filled/A1K.svelte"/>';
            break;
        case 'outlined':
            svgpath =
                '<path d="M19 3H5c-1.1 // path from outlined/A1K.svelte " />';
            break;
        case 'round':
            svgpath =
                '<path  d="M19 3H5c-1.1 // path from round/A1K.svelte"/>';
            break;
        case 'sharp':
            svgpath =
                '<path d="M21 3H3v18h18V3zM9 // path from sharp/A1K.svelte"/>';
            break;
        case 'two-tone':
            svgpath =
                '<path  d="M5 19h14v-6.// path from two-tone/A1K.svelte"/>';
            break;
        default:
            svgpath =
                '<path d="M10 10.5 // same path as filled"/>';
    }
</script>

<svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    fill={color}
    class={$$props.class}
    {...$$restProps}
    aria-label={ariaLabel}
    viewBox="0 0 24 24"
>
    {@html svgpath}
</svg>

Can I do this with Bash?

Answer 1

You can do that with bash. But you'll need an xml parser, which is impossible to implement with shell tools. XML is also not a regular language, so the classical regex tools like see, grep, perl/pcre aren't useful either.

There is a lot of posts here that user XML parser command line tools in shell scripts! At least that allows you to extract the contents of the tags you need and piece together a new valid svg.

Anyways, for your typescript joining you'll want more.

Honestly, use a more versatile scripting language you're familiar with rather than trying this in bash. There's nothing to be won here by doing this in a shell that was never meant to parse code other than its own syntax.

Python 3 is available on basically every Unix/Linux machine, it comes with a XML parser and is plenty able to handle templated strings like what you'd need for your 'if's. I guess ts would do as well -but I have never used typescript, so I can't make a qualified statement on this.