Script to build Components from svg icons

Wrote a simple script to build components for react, svelte, vue, and HTML/SVG from a folder of svg icons.

Written originally for Intellij Jetbrains Icons that includes more than 13000 high quality icons from Jetbrains. Check the project - https://github.com/repalash/jetbrains-icons-components

It's for use in jetbrains plugins.

Usage

• Download the script in a folder - build-icon-components.js
• Put all your svg icons in a folder named data. Keep the structure as you want it for components.
• Run the script with node - node build-icon-components.js
• This will create a folder named libs with the components that can be exported in a package.json like:

"exports": {
    "./react": "./lib/jsx/index.js",
    "./vue": "./lib/vue/index.js",
    "./svelte": "./lib/svelte/index.js",
    "./svg": "./lib/svg/index.js"
}

JSX

export default function ({width=16, height=16}) {
    return (
<svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>
    )
}

Vue

<script setup>
  defineProps({
    width: {type: Number, default: 16},
    height: {type: Number, default: 16},
  })
</script>
<template>
  <!-- Copyright 2000-2021 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file. -->
  <svg width={{width}} height={{height}} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  </svg>
</template>

Svelte

<script>
    export let width = 16;
    export let height = 16;
</script>
<!-- Copyright 2000-2021 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file. -->
<svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>

HTML/SVG

<svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>

Code on Github Gist -