Questions tagged [svg-react-loader]
16 questions
6
votes
3 answers
How can I use className on SVG imported as a component in Typescript React.FC
I have React, Typescript, svgr. Everything looks ok.
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
import Logo from 'assets/icons/logo.svg';
Max Bunker
- 177
- 2
- 11
1
vote
0 answers
Dynamic svg in Next.js 13
In brief: This component is working in Next.js v12, but doesn't work in Next.js v13
import React, { FC } from 'react'
import dynamic from 'next/dynamic'
// const DynamicComponent = (name:string) => dynamic(() =>…
Wiktor Kujawa
- 595
- 4
- 21
1
vote
1 answer
Issue with usage of SVG as a ReactComponent
I am trying to write a mapper that will return a SVG as a React component.
Here is how I import the SVG:
import {ReactComponent as Games} from './assets/game.svg';
And here is how I return the SVG:
return
balteo
- 23,602
- 63
- 219
- 412
1
vote
1 answer
NextJS & SVGR loading SVG as component breaks SVG
"dependencies": {
"daisyui": "^2.46.0",
"next": "13.0.5",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@svgr/webpack": "^6.5.1",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",
…
Jardo
- 31
- 2
1
vote
0 answers
How to use SVGR in reactjs and webpack with svg font?
I try to use SVGR to load SVG in my project with reactjs and webpack
but I got an unexpected error like this:
ERROR in ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg 1:0
Module parse failed: Unexpected token (1:0)
You may…
Rahele Nazari
- 351
- 1
- 4
- 11
1
vote
0 answers
Why svgr loads a string instead of the actual svg?
I have added svgr to my webpack config. When importing a svg in a component, I have a string: a8ef8eeaa76ec666d9b8ee7e93eea4c4.svg instead of the actual svg. How to fix this?
module: {
rules: [
{
test: /\.(ts|js)x?$/,
…
DoneDeal0
- 5,273
- 13
- 55
- 114
1
vote
0 answers
How can Add a Loader for the whole page in Reactjs?
I want to add a Loader when any API call is happening.
My application have layout with Header, Footer, Side Menu, ContentComponent.
I want to show overlay loader on the whole page.
Tried with…
Gnik
- 7,120
- 20
- 79
- 129
1
vote
1 answer
React Loader - Trying to get a loader when api request is made and to stop it when response is fetched
What I want is that, when I click on search button, then a loader/spinner should appear on screen until the data is fetched, when the data is fetched it should disappear.
Container.jsx
import React from 'react';
import './container.css'
import…
Himanshu Bhardwaj
- 852
- 6
- 18
1
vote
2 answers
False positive Typescript cannot find module warning
I am importing an Icon using the following code:
import Icon from "!svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg"
In Visual Studio Code 1.25.1 I get the following warning from tslint:
[ts] Cannot find module
…
Ben Smith
- 19,589
- 6
- 65
- 93
1
vote
1 answer
Can you have more than one SVG on a page? (using svg-react-loader)
I'm trying to import and display multiple SVGs in the same component, but it's actually just showing the first one duplicated every time, instead of two individual SVGs. Here is my code:
import React, { Component } from 'react';
import Account from…
Desmond
- 1,656
- 3
- 22
- 34
0
votes
1 answer
Fallback images for Images and Icons
Is there a way i would have a standard svg file that could function as a backup if all other pictures and icons fail to load (due to not fetching or just some error on client side).
As for Icons i use a SVGR library to import svgs as components…
0
votes
1 answer
SVGR two path combined as one path with same fill color
Why SVGR tool converted SVG's two path with same fill color combined as single path instead of separate path? Is there anyway to avoid this?
https://react-svgr.com/playground/
0
votes
0 answers
Change Dynamic loaded Svg path in Rollup
I am using rollup for configuring my React build. In one of the components, I am lazyloading svg file and integrating it to the component JSX using the svgr plugin. I am facing an issue as my svg file is currently inside the same component where it…
Master.Deep
- 792
- 5
- 20
0
votes
1 answer
React use SVGR with svg in public folder
Is there any way I can import an SVG file in my public folder as a React component like so :
import { ReactComponent as MySvg } from '/assets/svg/mysvg.svg';
const MyComponent = () => {
return (
Louis Lecouturier
- 318
- 3
- 11
0
votes
1 answer
React SVGR renders svg incorrectly
I'm trying to render 2 SVG files on my react app.
Here:
But when importing it as a component to React:
import { ReactComponent as ClosedEnvelope } from "../../close.svg";
import { ReactComponent as OpenEnvelope } from "../../open.svg";
const…
Mendi Sterenfeld
- 378
- 5
- 26