Agregamos un ícono SVG a nuestro sitio hecho con Gatsby

Existen muchas maneras de utilizar un SVG en un sitio web, se pueden insertar directamente con <img> ó con css. Sin embargo, el sitio esta hecho con Gatsby y por lo tanto estamos utilizando React, entonces... lo haremos con un Plugin!!!

El plugin que utilizaremos es gatsby-plugin-react-svg, vamos a ello!!!

Instalemos la librería:

$ npm i gatsby-plugin-react-svg

Ahora la insertamos en el blog y la configuramos (como siempre, los plugins van en el archivo gatsby-config.js):

...
plugins: [
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /icons/,
          omitKeys: ['xmlnsDc', 'xmlnsCc', 'xmlnsRdf', 'xmlnsSvg', 'xmlnsSodipodi', 'xmlnsInkscape']
        },
      },
    },
...

La regla importante es include, que debe indicar la ruta donde se encuentran nuestros SVG (include: /icons/). Además, algunos keys no son reconocidos por React, entonces utilizamos la propiedad omitKeys.

La configuración anterior funciona para la siguiente estructura de proyecto (notar que icons se encuentra en la raíz del proyecto):

Una vez configurado el plugin, podemos iniciar el proyecto normalmente.

$ gatsby develop

Ahora, insertaremos el SVG a cualquier componente, por ejemplo:

import React from "react";
import CalendarIcon from "../../icons/calendar.svg";
import CualquierNombre from "../../icons/cualquier-svg.svg";

const Blog = ({ data }) => (
  <div>
    <p>
      Miren mi maravilloso SVG <PenIcon />
    </p>
    <p>
      Aqui va otro, veamos como estaría <CualquierNombre />
    </p>
  </div>
);

Y eso es todo, así de sencillo. Keep coding!!!