Inject inline SVG

[dor]

Hello !

I would like to know what is the best way to inject inline SVG in Frontity ?

For example, when I use ‘create-react-app’ I can do something like this:

or in other cases, I can use npm package like this

TNX

[mmczaplinski]

Hi @dor !

Frontity is using webpack’s file loader under the hood with this configuration to load SVGs as well as other file types, so the standard webpack strategy applies: You can import your SVG and webpack will just give you the string with the final path to the file:

import myBeautifulCat from "./cats/myCat.svg"
// `myBeautifulCat` is a path to the SVG file.

import { css } from "frontity";

const CatComponent = () => (
  
  // you can pass the string to src directly
  <img src={myBeautifulCat} />

  // or you can do this too
  <div css={css`
       width: 100px;
       height: 200px;
       background: url(${myBeautifulCat});
       background-size: 100px 200px;
    `}
  />
)

Note that you can also set the publicPath for your assets!

PS. I think CRA is using https://github.com/gregberge/svgr under the hood which is pretty nice indeed! Wanna send a pull request to add support for it?

I hope this helps!

[tibor.udvari]

Hi, I’m pretty new in react so I don’t know how to solve the problem, like the original poster I want to load SVGs inline so i can play around with the fill and have a little more flexibility than loading it as an image.

[mmczaplinski]

Hey @tibor.udvari

For the moment, you can only load your SVGs as an image like mentioned above, but we are working on adding the ability to customize your webpack config so that users could add the svgr loader.

In the meantime, I would recommend just using the svgr CLI to convert your SVG files to react components. Then, you can configure them with props or style with CSS. You could do it manually or as part of your build process, the choice is yours!

[jeffceriello]

Hi there,

I also need to have an SVG inline. I have created an animated SVG with SVGator, which can only work inline and not in an object.

I have tried converting it into a React component via svgr CLI but I get the following error

(node:16837) UnhandledPromiseRejectionWarning: Error: Expected node, got `!function(t,n){"object"==typeof exports&&......

Is it now possible to add svgr loader instead?

Thanks,
Jeff

[mmczaplinski]

Hi @jeffceriello

I’m sorry but customizing the webpack config is still not supported. However, if the svgr CLI fails to convert it, it might be a problem with your SVG itself. You could try the online SVGR converter as well.