-
-
Notifications
You must be signed in to change notification settings - Fork 418
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to use with rollup #74
Comments
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 😅. |
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. |
You can specify all svgr options in webpack. If you have only one color, you should replace a color by currentColor using replace-attribute-value. |
@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 ? Does the replace-attribute-value work with jsx? |
It will replace a color by Yes it works with JSX. You can try it online https://svgr.now.sh/. |
@neoziro I feel sorry but I really didn't get (at all) what you've just wrote and how it can be done.
What do you meant by it ? What is currentColor ? I have clicked on the JSX example but setting the value of |
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 :) |
Hi @marquesdev, thanks a lot for taking the issue. I will gladly test it and implement it in our stack. 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. |
v2 is published 🎉 |
@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 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 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. |
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 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 I have then written the following component in 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'
|
I am not expert with Rollup but it is probably a configuration problem. |
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 |
@kopax did you find a solution to the above described issue?
I am experiencing the same issue |
Any solution, facing the same issue |
Looks like an old issue but maybe my rollup config will save time for somebody. my 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"],
},
]; |
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 ?
The text was updated successfully, but these errors were encountered: