Comments (17)
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 :)
from svgr.
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 😅.
from svgr.
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.
from svgr.
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.
from svgr.
@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?
from svgr.
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/.
from svgr.
@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.
from svgr.
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.
from svgr.
v2 is published 🎉
from svgr.
@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.
from svgr.
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 thelib
build made with babel-cli before intregating this in our node.js module stack. Any advices are greatly appreciated.
from svgr.
I am not expert with Rollup but it is probably a configuration problem.
from svgr.
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
?
from svgr.
I've found this: https://github.com/transitive-bullshit/create-react-library/blob/79fef84a9b/template/typescript/rollup.config.js
from svgr.
@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
from svgr.
Any solution, facing the same issue
from svgr.
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"],
},
];
from svgr.
Related Issues (20)
- After use, the svg structure in html is not consistent with the svg file
- Document plugins option? HOT 3
- props classname not append to svg classname and replaced in nextjs HOT 2
- Wrong Code generation for React Native with Refs
- Native generates invalid references to react-native-svg imports
- SVG not loading in Next.js version 14.0.4 HOT 4
- Custom template variable undefined when used as location for import declaration
- @svgr/webpack Not working with svg's from shared package inside monorepo HOT 1
- Unique IDs in runtime HOT 1
- Classic url import issue in typescript
- React Warning: Each child in a list should have a unique 'key' prop - Unveiling the SVGR SVG Component Dilemma
- Snake Case dependancy is depricated
- Introduce option to allow remove attributes for any component name
- overwriting dimensions HOT 1
- Website not working on Arc browser HOT 4
- Does the current project support the use of Vue2 or Vue3?
- fallback title is not working HOT 1
- Using props on SVGR components dynamically-imported with webpack
- exportType still doesn't work with rollupjs ?! HOT 1
- Unable to resolve 'path'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svgr.