All Questions
1,997
questions
217
votes
17
answers
485k
views
How to display svg icons(.svg files) in UI using React Component?
I have seen a lot of libraries for svg on react but none gave me how to import an svg file in the react component. I have seen code which talk about bring the svg code into react rather than using the ...
- 2,515
158
votes
7
answers
176k
views
Embedding SVG into ReactJS
Is it possible to embed SVG markup into a ReactJS component?
render: function() {
return (
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/...
- 14.4k
141
votes
7
answers
118k
views
SVG use tag and ReactJS
So normally to include most of my SVG icons that require simple styling, I do:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
Now I have been playing with ReactJS as ...
- 27.8k
132
votes
9
answers
131k
views
SyntaxError: unknown: Namespace tags are not supported by default
I get the following error when trying to download svg as a React Component.
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can ...
- 6,638
67
votes
17
answers
196k
views
How to enlarge the SVG icon in Material UI iconButtons?
Has anyone built webpages using react.js and the Material UI library? How should I resize the icon size? It is a SVG icon.
I just built a "create new" component, which is a piece of material ...
- 2,319
62
votes
7
answers
60k
views
TypeScript - Module '"*.svg"' has no exported member 'ReactComponent
I'm trying to import an .svg file as a React component with TypeScript.
According to the React docs, this is done like so:
import { ReactComponent as Icon } from './Icon.svg';
Following the TypeScript ...
- 1,045
60
votes
9
answers
113k
views
how to set up an inline svg with webpack
I am wondering how to set up an inline svg with webpack?
I am following the react-webpack-cookbook.
I have my webpack.config set up correctly with the file loader.
However the example shows ...
- 23.8k
56
votes
13
answers
86k
views
React Native - how to use local SVG file (and color it)
I have some .svg icons locally that I'd like to use in my RN project.
An example is an .svg icon like this (opened in Chrome):
I'd like to display this file (as well as having control in specifying ...
- 4,196
44
votes
16
answers
71k
views
Jest cannot load svg file
In my app I use React and TypeScript. I tried to run jest tests I get following error:
C:\Users\e-KDKK\workspace\konrad\mikskarpety\src\images\icons\Sock.svg:1
({"Object.<anonymous>":function(...
- 1,514
43
votes
7
answers
41k
views
Turning an SVG string into an image in a React component
I have a dynamically generated SVG string in a React component. I want to embed this as an image in the component. Currently, I'm using something along the lines of:
class SomeComponent extends React....
- 2,849
42
votes
6
answers
49k
views
How to turn on the 'throwIfNamespace' flag in React.js
I have some code like below in my component.
<svg id="SvgjsSvg3254" width="318" height="152" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:...
- 6,912
41
votes
5
answers
66k
views
how to zoom in on a complex svg structure
I have a complex set of shapes that are in the snippet. They are rendered with React but I'm really just looking for some pointers about how I would go about being able to zoom these shapes in and out....
- 28.2k
40
votes
8
answers
114k
views
SVG size in react
Hello im desperately trying to size an svg in react.
No matter what i do the size stays the same even though the div containing it is much smaller.
In normal html and css it would size automatically ...
- 763
38
votes
7
answers
90k
views
React SVG component as background-image to div
I am trying to get styled-components to take an SVG that is a react component and set it as a background-image but I get the error:
TypeError: Cannot convert a Symbol value to a string
SVG ...
- 800
30
votes
8
answers
99k
views
How to declare types of props of SVG component? [React, TypeScript and Webpack]
Basically, what I want to do is to import an SVG icon to my react component and add props to it. Like size="24px" to make it more flexible as a component. Or make it editable with CSS by ...
- 301