How to use with rollup

[kopax]

Hi,

I want to make a node package of our logos made in svg.
I want to be able to import them as in the webpack example (react or link)

Is it possible with Rollup.JS ?

[gregberge]

Yes it is possible but you will have to write the rollup plugin. It should be easy but I don't know how it works 😅.

[kopax]

Ok I will have a look and see what I can do.

Another question, I have fill values I want to set from my react-component.

I am using the webpack-loader, how can I configure that efficiently. I do not use svgr command line utility.

[gregberge]

You can specify all svgr options in webpack.
If you have several values to set it will be complicated, the best is to use SVGR at start then modify your component.

If you have only one color, you should replace a color by currentColor using replace-attribute-value.

[kopax]

@neoziro not sure if I understand.

I am in a JSX context and I have a component, how can I pass a var to the svg ?
One color is generally enough.

Does the replace-attribute-value work with jsx?

[gregberge]

It will replace a color by currentColor, currentColor inherits from the css property "color" so you can just style it with CSS. It will work like a webfont.

Yes it works with JSX. You can try it online https://svgr.now.sh/.

[kopax]

@neoziro I feel sorry but I really didn't get (at all) what you've just wrote and how it can be done.

It will replace a color by currentColor, currentColor inherits from the css property "color" so you can just style it with CSS. It will work like a webfont.

What do you meant by it ? What is currentColor ?

I have clicked on the JSX example but setting the value of replace attribute value on the left panel and didn't change anything.

[marques-kevin]

Hello guys ! I'm not a Rollup expert but I want to implement this feature :)

I think it will be ready in 1 or 2 days :)

[kopax]

Hi @marquesdev, thanks a lot for taking the issue. I will gladly test it and implement it in our stack.
How is it going so far? I am on Gitter https://gitter.im/rollup/rollup (as the author) if we need to chat.

Edit

By the way, if you know what neoziro meant with the usage of currentColor, we haven't figure out how to pass variables from react to svg.

[gregberge]

v2 is published 🎉

[kopax]

@neoziro thanks for the job, I still have a question regarding the usage we should have.

We use rollup to build module, but we also produce a folder of CJS just wih babel.

We generally use the rollup version through module key in package.json but both version have to work.

So far, rollup was only in charge of creating different distribution and building everything in one file.

If we add this new module, how will our babel build will behave when importing this code? We can add --copy-files to the babel command so we can also have the svg present in the babel build, but how about svgr?

We generally create application with webpack, and maybe this is already configured with create-react-app and svgr in it.

My concerns is I don't want break thing by including this new feature in our core module boilerplate.

[kopax]

So I have a boilerplate project where I use rollup and I have installed your plugin like this :

$ npm install @svgr/rollup --save-dev

We also use react-styleguidist for documentation so we will need the webpack plugin too:

$ npm install --save-dev @svgr/webpack

I have configured rollup.config.js with :

import svgr from '@svgr/rollup';
import url from 'rollup-plugin-url';

  url({
    limit: 10 * 1024, // inline files < 10k, copy files > 10k
    include: ["**/*.svg"], // defaults to .svg, .png, .jpg and .gif files
    emitFiles: true // defaults to true
  }), 
  svgr(),

Starting here, I have a doubt if I should edit include: ["**/*.svg"] to include: ["src/**/*.svg"] as we use src directory, but rollup already know about it so I am not sure.

I have then written the following component in src/index.js:

import React from 'react';
import PropTypes from 'prop-types';
import computerUrl, { ReactComponent as Computer } from './computer.svg'
export default class ReactDemo extends React.Component {
  static propTypes = {
    testProps: PropTypes.bool,
  }
  static defaultProps = {
    testProps: true,
  }
  render() {
    const { testProps, ...rest } = this.props;
    return (
      <div>
        <img src={computerUrl} alt="computerUrl" />
        <Computer />
      </div>
    );
  }
}

I wanted to try it both, the rollup version and the babel version using my react-styleguidist, I assum it is the same as create-react-app when configured with the webpack plugin.

This is how I have updated my webpackConfiguration:

const cfg = config.webpackConfig;

cfg.module.rules.push({
	test: /\.svg$/,
	loader: '@svgr/webpack'
})
module.exports = {
  ...config,
  webpackConfig: cfg
}

But then when I try to run the documentation:

./src/index.js 43:28-36
"export 'ReactComponent' (imported as 'Computer') was not found in './computer.svg'

• Am I doing anything wrong ?
• I need to know if we can keep things compatible between the /dist build made with rollup and the lib build made with babel-cli before intregating this in our node.js module stack. Any advices are greatly appreciated.

[gregberge]

I am not expert with Rollup but it is probably a configuration problem.

[kopax]

This is happening when we scan for components to generate the documentatin with react-styleguidist.

So it is a webpack issue, which cannot found/import the svg.

I was not able to test the rollup distribution at all, as it needs to be tested within an environment like webpack for being used.

This is something unclear to me and this is why I asked for advice. If you don't know, can you leave this open so I can get contribution from somebody else please?

I have a bunch of question which haven't been answered yet. How does it work if we don't produce the build with rollup ? Will the webpack plugin will be able to import the svg even if the files which is doing the react import is in node_modules ?

[fritx]

I've found this: https://github.com/transitive-bullshit/create-react-library/blob/79fef84a9b/template/typescript/rollup.config.js

[lukaskoeller]

@kopax did you find a solution to the above described issue?

"export 'ReactComponent' (imported as 'Computer') was not found in './computer.svg'

I am experiencing the same issue

[alertfusion]

Any solution, facing the same issue

[bohdan-sharkz]

Looks like an old issue but maybe my rollup config will save time for somebody.
I'm exporting all svg's in index.ts file like:
export {ReactComponent as AlertCircle} from "./alert-circle.svg" (it's CRA v2 project so exporting svg as ReactComponent is available out of the box)

my rollup.config.js file

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { default as dts } from "rollup-plugin-dts";
import css from "rollup-plugin-import-css";
import image from "@rollup/plugin-image";
import svgr from "@svgr/rollup";
import copy from "rollup-plugin-copy";

import generatePackageJson from "rollup-plugin-generate-package-json";

import pkg from "./package.json";

const commonPlugins = [
	commonjs(), // Convert cjs imports to esm
	typescript({
		// Compile typescript, but leave declaration generation to dts package
		compilerOptions: {
			declaration: false,
		},
	}),
	nodeResolve(), // Resolve node_module imports
	generatePackageJson({
		outputFolder: "./common-components",
		baseContents: {
			...pkg,
		},
	}),
	css(),
	image(),
	svgr({
		dimensions: false,
		svgoConfig: {
			plugins: [
				{
					name: "preset-default",
					params: {
						overrides: {
							// viewBox is required to resize SVGs with CSS.
							// @see https://github.com/svg/svgo/issues/1128
							removeViewBox: false,
							removeUnknownsAndDefaults: false,
						},
					},
				},
				{ name: "removeViewBox", active: false },
				{ name: "removeUnknownsAndDefaults", active: false },
			],
		},
	}),
	copy({
		targets: [
			{
				src: "src/assets/fonts",
				dest: "common-components/assets",
			},
			{
				src: "src/definitions/styles",
				dest: "common-components/definitions",
			},
		],
	}),
];

export default [
	//.js bundles
	{
		input: "src/index.ts",
		output: {
			dir: "common-components",
			format: "esm",
			sourcemap: false,
		},
		plugins: [...commonPlugins],
		external: ["react", "react-dom"],
	},
	//.d.ts definitions
	{
		input: "src/index.ts",
		output: {
			dir: "common-components",
			format: "esm",
		},
		plugins: [...commonPlugins, dts.default()],
		external: ["react", "react-dom"],
	},
];