Make .svg's MAGIC again.
One installation, one line of code, one import; endless possibilities.
user@system path %pnpm i svgmagic
import SVGM from "../svgm/SVGM"
<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.
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.
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.
<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.
<SVGM kind="svgm" className="h-8 text-red-500"/>
Customizable
Secure by default
Provident fugit and vero voluptate. magnam magni doloribus dolores voluptates a sapiente nisi.
Faster than light
Provident fugit vero voluptate. magnam magni doloribus dolores voluptates inventore nisi.
Faster than light
Provident fugit vero voluptate. Voluptates a sapiente inventore nisi.
Keep your loved ones safe
Voluptate. magnam magni doloribus dolores voluptates a sapiente.
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
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