Make .svg's MAGIC again.

One installation, one line of code, one import; endless possibilities.

MADE FOR
Star on GitHub
Install with
user@system path %pnpm i svgmagic
1
import SVGM from "../svgm/SVGM"
2
<SVGM kind="svgm"/>

Easy Installation

Install SVGM quickly using your favorite package manager. Get started with a simple command.

NPM
Install SVGM using npm with a single command.
Yarn
Use Yarn to add SVGM to your project effortlessly.
PNPM
Leverage the power of PNPM for a fast installation.
user@system path %pnpm i svgmagic

Run Installation Script

Easily run the installation script to set up SVGM in your project. Save time and streamline your workflow.

Automated Setup
Let the script handle the setup for you.
Quick Start
Get started quickly with minimal configuration.
Time-Saving
Reduce setup time and focus on development.
user@system path % svgm-setup

Import SVGM Component

Import the scaffolded SVGM component into your project and start using it right away.

Scaffolded
Pre-built component ready for use in your project.
Easy Integration
Integrate SVGM into your codebase with ease.
React Friendly
Designed for seamless integration with React.
1
import SVGM from "../svgm/SVGM"

Select or Import SVG

Use SVGM to select an existing SVG or import your own. Customize your UI with ease.

Pre-Loaded Library
Access a library of pre-loaded .SVG files.
Custom SVGs
Easily import and use your own .SVG files.
Dynamic Selection
Select and use .SVG's dynamically in your project.
2
<SVGM kind="svgm"/>

Style Your SVG

Use your favorite tools like Tailwind CSS to style your SVGs. Set your height only to support wide files, like logotypes.

Tailwind CSS
Apply Tailwind CSS classes to style your SVGs.
Flexibility
Style .SVG's inline to match your design specifications.
Responsive
Ensure your vector files look great on all devices.
2
<SVGM kind="svgm" className="h-8 text-red-500"/>

Development Roadmap

Features live in latest release

  • Live Dynamic .svg file loading with one import in Typescript and MDX
  • Live Automatic publish workflow with GitHub Releases, GitHub Packages, and npm
  • Live Markdown → HTML patch notes and badge fetching from GitHub API and Shields
Loading...

Features currently in development

  • Add svgm.config.ts for configuration management
  • Add sets prop for calling the same .svg's more than once
  • Add svgGallery.tsx to package for example components
  • Add additional sample .svg files
  • Add automatic <a> anchor tags when a link prop is passed
  • Add debug boolean prop to render all icons and test them for consistency in size and color

Features planned for future releases

  • Add comprehensive testing to ensure reliability, accessibility, compatibility and performance
  • Add ability to call an SVGinline in a blog heading in MDX
  • Remove Webpack feature requires.context in favor of framework agnostic solution
  • Support vanilla JavaScript to broaden usability
  • Support additional React libraries (Vue, Svelte, etc.) to broaden usability
  • Test new libraries with various boilerplates and themes
MADE POSSIBLE WITH