Neatly Prepared Mustache

    @paulkre/gatsby-transformer-svg

    1.1.0 • Public • Published

    @paulkre/gatsby-transformer-svg

    Inline and optimize SVG's from your GraphQL data source

    Installation

    yarn add @paulkre/gatsby-transformer-svg

    Usage

    gatsby-config.js

    module.exports = {
      plugins: ["@paulkre/gatsby-transformer-svg"],
    };

    Optionally, you can also override the SVGO options which are being used internally to optimize the .svg files:

    module.exports = {
      plugins: [
        {
          resolve: "@paulkre/gatsby-transformer-svg",
          options: {
            svgo: {
              multipass: true,
              floatPrecision: 2,
              plugins: [
                // ...
              ],
            },
          },
        },
      ],
    };

    GraphQL Query

    file {
      childSvg {
        content {
          data
          width
          height
        }
      }
    }

    Rendering

    import React from "react";
    
    export default function Image({ file }) {
      if (file?.childSvg?.content) {
        return (
          <div dangerouslySetInnerHTML={{ __html: file?.childSvg?.content.data }} />
        );
      }
    }

    Install

    npm i @paulkre/gatsby-transformer-svg

    DownloadsWeekly Downloads

    20

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    5.84 kB

    Total Files

    6

    Last publish

    Collaborators

    • paulkre