React svg loader typescript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

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

Using svgr with webpack and TypeScript #546

Using svgr with webpack and TypeScript #546

Comments

This isn’t really a question or request for help, rather a suggestion that the docs be updated a bit to help others out so they don’t spend quite as much time fumbling around as I did.

Setting up svgr as a webpack loader is wonderfully easy and works right out of the box as described in the docs. However, if you are using TypeScript, you must an ambient type definition in order for the TypeScript compiler to understand what to do with svg files. The typical example looks like this:

declare module "*.svg"  const svg: string; export default svg; >

And this allows you to get the basics working:

import  FC > from "react"; import Logo from "./logo.svg"; const MyLogo: FC = () => ( Logo /> );

However, if you want to add props to the Logo component, none of the expected props will be accepted. This is because the ambient type declaration doesn’t adequately describe the component created by svgr. In order to have the component typed correctly, you need the following ambient type definition instead:

declare module "*.svg"  import React from "react"; const SVG: React.VFCReact.SVGPropsSVGSVGElement>>; export default SVG; >

Now, the TypeScript compiler understands that what svgr hands off to you via the import statement is a React component that generates an element with the full range of props available to you.

import  CSSProperties, FC > from "react"; import Logo from "./logo.svg"; const logoStyle: CSSProperties =  fill: "#CF4532", width: "100px" >; const MyLogo: FC = () => ( Logo style= logoStyle >/> );

One of those things that isn’t immediately obvious and probably should be explicitly stated in the docs.

The text was updated successfully, but these errors were encountered:

This isn’t really a question or request for help, rather a suggestion that the docs be updated a bit to help others out so they don’t spend quite as much time fumbling around as I did.

Setting up svgr as a webpack loader is wonderfully easy and works right out of the box as described in the docs. However, if you are using TypeScript, you must an ambient type definition in order for the TypeScript compiler to understand what to do with svg files. The typical example looks like this:

declare module "*.svg"  const svg: string; export default svg; >

And this allows you to get the basics working:

import  FC > from "react"; import Logo from "./logo.svg"; const MyLogo: FC = () => ( Logo /> );

However, if you want to add props to the Logo component, none of the expected props will be accepted. This is because the ambient type declaration doesn’t adequately describe the component created by svgr. In order to have the component typed correctly, you need the following ambient type definition instead:

declare module "*.svg"  import React from "react"; const SVG: React.VFCReact.SVGPropsSVGSVGElement>>; export default SVG; >

Now, the TypeScript compiler understands that what svgr hands off to you via the import statement is a React component that generates an element with the full range of props available to you.

import  CSSProperties, FC > from "react"; import Logo from "./logo.svg"; const logoStyle: CSSProperties =  fill: "#CF4532", width: "100px" >; const MyLogo: FC = () => ( Logo style= logoStyle >/> );

One of those things that isn’t immediately obvious and probably should be explicitly stated in the docs.

@mutsys where are you putting the declaration file?

Источник

React svg loader typescript

SVGR provides an official webpack.js loader to import SVG as React components.

npm install --save-dev @svgr/webpack
 
# or use yarn 
 
yarn add --dev @svgr/webpack

webpack.config.js

module.exports =  
 module:  
 rules: [ 
 
 
 test: /\.svg$/i, 
 issuer: /\.[jt]sx?$/, 
 use: ['@svgr/webpack'], 
 
>, 
 
], 
 
>, 
 
>

import Star from './star.svg' 
 
const Example = () => ( 
 
div> 
 
Star /> 
 
/div> 
 
)

SVGR let you specify options in a runtime config file like svgr.config.js or directly in the loader:

webpack.config.js

module.exports =  
 module:  
 rules: [ 
 
 
 test: /\.svg$/i, 
 issuer: /\.[jt]sx?$/, 
 use: [ loader: '@svgr/webpack', options:  icon: true > >], 
 
>, 
 
], 
 
>, 
 
>

SVGR options reference describes all options available.

You may be interested to use some SVG as an asset (url) and other SVG as a React component. The easiest way to do it is to use a resourceQuery for one of the two type.

webpack.config.js

module.exports =  
 module:  
 rules: [ 
 
 
 test: /\.svg$/i, 
 type: 'asset', 
 resourceQuery: /url/, // *.svg?url 
 
>, 
 
 
 test: /\.svg$/i, 
 issuer: /\.[jt]sx?$/, 
 resourceQuery:  not: [/url/] >, // exclude react component if *.svg?url 
 use: ['@svgr/webpack'], 
 
>, 
 
], 
 
>, 
 
>

import svg from './assets/file.svg?url' 
 
import Svg from './assets/file.svg' 
 
const App = () =>  
 
return ( 
 
div> 
 
img src=svg> width="200" height="200" /> 
 
Svg width="200" height="200" viewBox="0 0 3500 3500" /> 
 
/div> 
 
) 
 
>

The issuer: /\.[jt]sx?$/ option ensures that SVGR will only apply if the SVG is imported from a JavaScript or a TypeScript file. It allows you to safely import SVG into your .css or .scss without any issue.

.example  
 
background-image: url(./assets/file.svg); 
 
>

url-loader and file-loader are deprecated over Asset Modules in webpack v5. It is widely encouraged to use resourceQuery method described before.

SVGR can be used with url-loader or file-loader .

webpack.config.js

module.exports =  
 module:  
 rules: [ 
 
 
 test: /\.svg$/i, 
 issuer: /\.[jt]sx?$/, 
 use: ['@svgr/webpack', 'url-loader'], 
 
>, 
 
], 
 
>, 
 
>

import starUrl,  ReactComponent as Star > from './star.svg' 
 
const App = () => ( 
 
div> 
 
img src=starUrl> alt="star" /> 
 
Star /> 
 
/div> 
 
)

The named export defaults to ReactComponent and can be customized with the namedExport option.

Please note that by default, @svgr/webpack will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, @svgr/webpack will always export the React component via named export.

If you prefer named export in any case, you may set the exportType option to named .

By default, @svgr/webpack includes a babel-loader with an optimized configuration. In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying babel: false in options.

// Example using preact 
 
 
 test: /\.svg$/, 
 use: [ 
 
 
 loader: 'babel-loader', 
 options:  
 presets: ['preact', 'env'], 
 
>, 
 
>, 
 
 
 loader: '@svgr/webpack', 
 options:  babel: false >, 
 
> 
 
], 
 
>

Источник