SVGMagic is a tool for managing and customizing SVG files. It offers easy installation, automatic setup, and supports React. Users can import, select, or create custom SVGs and style them using CSS. Features include pre-loaded libraries and tailored styling options.
Features
Easy Installation
Install SVGMagic quickly using popular package managers like NPM or PNP_M with a single command.
Run Installation Script
Automated setup script to streamline project setup, saving time with quick start and consistent process.
Import SVGMagic Component
Easily import the scaffolded SVGMagic component into your project with seamless integration and React-friendly design.
Select or Import SVG
Choose from a pre-loaded library of SVGs or import custom SVGs, allowing customization of styling and properties.
Style Your SVG
Use Tailwind CSS and other styling methods to modify SVGs, ensuring flexibility and responsiveness across devices.
SVG Embedding
Enables the user to embed SVGs directly into React applications, optimizing workflows with automatic embedding during the build process.
Custom Configuration
Allows developers to configure the embedding process, tailoring properties of SVGs like dimensions, to suit different project needs.
Compatibility with Babel
Can be easily installed into projects using Babel, making it highly compatible with existing JavaScript setups.
Simplified Usage
Provides clear instructions and examples for quickly setting up and using the package within projects.
Package Installation
Install the svgMagic package using npm with the command `npm install svgmagic` to set up the project.
Interactive Setup Script
Run the post-install interactive script using `svgm-setup` for initial configuration.
Directory Configuration
Allows changing the default directory for your .svg files, avoiding overwriting existing files.
SVGR Installation
Ensure SVGR is installed with the command `npm install @svgr/webpack`, as it is needed for transforming SVG files into React components.
SVGR Next.js Configuration
Configure SVGR in Next.js projects by adding specific Webpack rules in `next.config.js`.
kind Property
The 'kind' property allows you to specify which .svg file to load by providing the filename within your JSX component.
className Property
The 'className' property lets you define the class names for your SVG code. These class names can be used with Vanilla CSS or TailwindCSS to style SVGs.
SVG Import
Import and use the SVG component in your TypeScript project. Simply import the SVG from the path and include it in your JSX code.
Kind Prop Configuration
Easily change the SVG file being rendered by modifying the 'kind' property to any file name in your directory.
MDX Integration
Utilize the SVG in an MDX document by importing the component into your MDX files. This allows seamless integration within documentation files.
Dynamic Color Change
The page explains how to change the fill tag from a color to currentColor, allowing SVG colors to dynamically change based on surrounding text styles.
Theme Support
Allows SVGs to automatically switch themes. If a project has a changing background color based on theme, SVGs will match the text color dynamically.
Basic Styling
Allows direct editing of SVG code in IDEs like Visual Studio Code to change colors dynamically without JavaScript.
Advanced Styling with TailwindCSS
Integrates with TailwindCSS to apply utility classes to SVGs, enabling styling with Tailwind's utility classes.
Supporting Dark Mode
Enables easy styling for dark mode using TailwindCSS by enabling dark mode in the Tailwind config and applying dark mode styles with the dark: prefix.
SVG Integration
Simplifies the integration of SVGs in Next.js projects using Typescript and MDX, making SVGs more accessible and easier to manage.
SVG Usage Improvements
Before and after examples show how using svgMAGIC optimizes SVG handling in Next.js by reducing boilerplate code.
Type Safety
Utilizes Typescript to ensure that SVGs are typed correctly, preventing runtime errors and improving code quality.
MDX Compatibility
Supports using SVGs directly in MDX files, allowing for seamless inclusion of SVG graphics in markdown content.