Docs

Styling

Learn to integrate TailwindCSS with svgMagic for accessible, easily customizable SVG artwork on the web.

Basic Styling

It's important to note that your SVG code can be opened directly in your IDE (like Visual Studio Code). This will allow you to change the colors of the parts of your artwork that you want to be dynamically changed in your application. If you don't plan on recoloring your SVG artwork with Javascript, you're already set. If you're displaying an SVG and want to dynamically recolor it for different themes or better accessibility in light or dark mode, see some examples below.

For more information about preparing your .svg file for use with SVGM and TailwindCSS see .svg File Prep

Advanced Styling

Using TailwindCSS

svgMagic works seamlessly with Tailwind CSS, allowing you to apply utility classes to your SVGs. Here's a quick guide on how to integrate svgMagic with Tailwind CSS:

Install Tailwind CSS: If you haven't already, you can install Tailwind CSS in your project by following the official Tailwind CSS installation guide.
Apply Tailwind Classes: You can use Tailwind's utility classes to style your SVGs directly in your JSX code. For example:

example.tsx

<SVGM kind="svgm-mark" className="h-16 text-red-500" />

Supporting Dark Mode

Supporting dark mode with svgMagic is straightforward. Since Tailwind CSS provides excellent support for dark mode, you can leverage it to style your SVGs accordingly. Here's how:

Enable Dark Mode in Tailwind CSS: First, enable dark mode in your tailwind.config.js file:

tailwind.config.js

module.exports = {
        darkMode: 'class',
      }

Apply Dark Mode Styles: Use the dark: prefix to apply styles when dark mode is active. For example:

example.tsx

<SVGM kind="svgm-mark" className="h-16 text-blue-600 dark:text-blue-400" />

Additional Examples

Height

Width

Color

className Styling prop Example Component Source:

svgm.mdx

<div className="flex flex-wrap justify-center my-8">
        <SVGM kind="svgm-mark" className="h-8" />
        <SVGM kind="svgm-mark" className="h-10" />
        <SVGM kind="svgm-mark" className="h-12" />
        <SVGM kind="svgm-mark" className="h-16" />
        <SVGM kind="svgm-mark" className="h-20" />
        <SVGM kind="svgm-mark" className="h-24" />
        </div>
        <div className="flex flex-wrap justify-center my-8">
        <SVGM kind="svgm-mark" className="w-8" />
        <SVGM kind="svgm-mark" className="w-10" />
        <SVGM kind="svgm-mark" className="w-12" />
        <SVGM kind="svgm-mark" className="w-16" />
        <SVGM kind="svgm-mark" className="w-20" />
        <SVGM kind="svgm-mark" className="w-24" />
        </div>
        <div className="flex flex-wrap justify-center my-8">
        <SVGM kind="svgm-mark" className="h-10 text-white" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-100" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-200" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-300" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-400" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-500" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-600" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-700" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-800" />
        <SVGM kind="svgm-mark" className="h-10 text-neutral-900" />
        <SVGM kind="svgm-mark" className="h-10 text-black" />
        </div>
        <div className="flex flex-wrap justify-center my-8">
        <SVGM kind="svgm-mark" className="h-10 text-red-500" />
        <SVGM kind="svgm-mark" className="h-10 text-orange-500" />
        <SVGM kind="svgm-mark" className="h-10 text-amber-500" />
        <SVGM kind="svgm-mark" className="h-10 text-yellow-500" />
        <SVGM kind="svgm-mark" className="h-10 text-lime-500" />
        <SVGM kind="svgm-mark" className="h-10 text-green-500" />
        <SVGM kind="svgm-mark" className="h-10 text-teal-500" />
        <SVGM kind="svgm-mark" className="h-10 text-sky-500" />
        <SVGM kind="svgm-mark" className="h-10 text-blue-500" />
        <SVGM kind="svgm-mark" className="h-10 text-indigo-500" />
        <SVGM kind="svgm-mark" className="h-10 text-purple-500" />
        <SVGM kind="svgm-mark" className="h-10 text-pink-500" />
        <SVGM kind="svgm-mark" className="h-10 text-rose-500" />
        </div>

SVG Preparation