https://github.com/axe312ger/gatsby-transformer-inline-svg

Read and optimize SVG file nodes to render them inline in your website.
https://github.com/axe312ger/gatsby-transformer-inline-svg

gatsby gatsby-plugin react svg webperformance

Last synced: 5 days ago
JSON representation

Read and optimize SVG file nodes to render them inline in your website.

• Host: GitHub
• URL: https://github.com/axe312ger/gatsby-transformer-inline-svg
• Owner: axe312ger
• Created: 2019-08-13T22:42:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-12-28T11:19:52.000Z (25 days ago)
• Last Synced: 2025-01-07T00:35:36.493Z (15 days ago)
• Topics: gatsby, gatsby-plugin, react, svg, webperformance
• Language: JavaScript
• Homepage:
• Size: 1.23 MB
• Stars: 12
• Watchers: 3
• Forks: 11
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gatsby-transformer-inline-svg

[![npm](https://img.shields.io/npm/v/gatsby-transformer-inline-svg.svg?label=npm@latest)](https://www.npmjs.com/package/gatsby-transformer-inline-svg)

[![npm](https://img.shields.io/npm/dm/gatsby-transformer-inline-svg.svg)](https://www.npmjs.com/package/gatsby-transformer-inline-svg)

[![Maintainability](https://api.codeclimate.com/v1/badges/fc81fa5e535561c0a6ff/maintainability)](https://codeclimate.com/github/axe312ger/gatsby-transformer-inline-svg/maintainability)

[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v1.4%20adopted-ff69b4.svg)](CODE_OF_CONDUCT.md)

Read and optimize (Contentful) SVG file nodes to render them inline in your website.

If you want to render static SVG files, use https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/.

## Features

* Read content of your SVG files from `gatsby-source-contentful` and `gatsby-source-filesystem`.

* Provides original SVG content for further processing

* Optimizes output via [SVGO](https://github.com/svg/svgo)

* Provides a compact data URI via [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri)

* Downloads svg and caches it via [createRemoteFileNode](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem#createremotefilenode)

## Installation

```sh

npm i gatsby-transformer-inline-svg

```

## Usage

Pass your server connection credentials, the remote cache directory and the directories you want to cache to the plugin options in your `gatsby-config.js`:

**gatsby-config.js**:

```js

module.exports = {

  plugins: [

    `gatsby-transformer-inline-svg`

  ]

}

```

**GraphQL Query**:

```graphql

... on ContentfulAsset {

  svg {

    content # SVG content optimized with SVGO

    originalContent # Original SVG content

    dataURI # Optimized SVG as compact dataURI

    absolutePath #

    relativePath #

  }

  file {

    contentType

    url

    fileName

  }

}

... on File {

  svg {

    content # SVG content optimized with SVGO

    originalContent # Original SVG content

    dataURI # Optimized SVG as compact dataURI

    absolutePath #

    relativePath #

  }

  absolutePath

  name

  internal {

    mediaType

  }

}

```

**Rendering**:

```jsx

import React from 'react'

import propTypes from 'prop-types'

import GatsbyImage from 'gatsby-plugin-image'

// Render inline SVG with fallback non-svg images

export default function Image({ svg, gatsbyImageData, file, alt }) {

  if (file.contentType === 'image/svg+xml') {

    if (svg && svg.content) {

      // Inlined SVGs

      return 


    }


    // SVGs that can/should not be inlined

    return 

  }

  // Non SVG images

  return 

}

```