SVG-Extract

Extracts inline SVGs into separate files, and imports them back. It supports TypeScript, JavaScript, Astro, etc.

How to use

1. Select the SVG you want to extract in the editor and run the Extract SVG command from the command palette (Ctrl+Shift+P).

2. Enter the import path for the svg file based on the preview and press Enter.

2. Select the import method you want to use (raw content or as an asset) depending on your build system and press Enter.

3. Select the expression type you want to use (e.g. Fragment, innerHTML, et.c) depending on your framework and press Enter.

3. The file will be updated to import the new svg file.

Demo (JSX)

Given the following JSX file:

function Test() {
  return (
    <div id="some_button">
      <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
          fill-rule="evenodd"
          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </div>
  )
}

By selecting the raw content import method and innerHTML expression type (e.g. Solid-js), the file will be updated to:

import svg_1ZU9X from "./svg_1ZU9X.svg?raw"

function Test() {
  return (
    <div id="some_button">
      <span innerHTML={svg_1ZU9X} />
    </div>
  )
}

This sets the innerHTML of the span to the SVG content.

Demo (Astro)

Given the following Astro file:

---
---

<div id="some_button">
  <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
    ><path
      fill-rule="evenodd"
      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
      clip-rule="evenodd"></path></svg
  >
</div>

After selecting the SVG and running the Extract SVG command, the file will be updated to:

---
import chevron_left from "./chevron_left.svg?raw"

---

<div id="some_button">
  <Fragment set:html={chevron_left} />
</div>

And file chevron_left.svg will be created in the same directory as the original file.