Environment info
React native info output:
"react": "16.8.6",
"react-native": "0.60.4"
Library version: 1.2.3
Steps To Reproduce
Create a fresh project using react-native-cli.
Bring in an SVG file into the src folder of the project (I downloaded and used the homer simpson image mentioned in the documentation of react-native-svg-uri for the test ).
Import the svg as import MySVG from './mysvg.svg';
Pass MySVG into svgXmlData property of SvgUri component
Expected behaviour
The image should render on screen
Reproducible sample code
import React from 'react';
import SvgUri from 'react-native-svg-uri';
import MySVG from './mysvg.svg';
const MyComponent = () => {
return (
<>
<SvgUri
svgXmlData={MySVG}
width="25"
height="25"
/>
</>
);
};
export default MyComponent;
Error Message
You can try this Direct Path Declaration
<SvgUri
width="25"
height="25"
source={require('./mysvg.svg')} />
If you have a svg file declared and not using an uri, I would recommend to use the react-native-svg project from the react-native-community (https://github.com/react-native-community/react-native-svg)
With this, you turn your svg file to a React Stateless Component (the translation is quite straightforward) and you can use it as a standard React component.
Related
I am trying to embed React Components into Angular because I have written some react components only because it's using a React library. However, my main framework is still Angular12+.
I have this .tsx file src/app/my-react-component.tsx
import * as React from 'react';
export default function MyReact() {
return (
<div>
<h1>Hello My React Component!</h1>
</div>
);
}
and I want to import this from src/app/app.component.ts
import MyReact from './my-react-component';
Then, I see this error
Import error, can't find file:
./my-react-component
To try, I added "jsx": "react" to tsconfig.json, but did not work, a solution from https://codebyz.com/embedding-react-components-in-angular-the-easy-way/
This is stackblitz page, which you can see this error.
Anyone who has a victory on importing .tsx into Angular project?
I think you did everything right
specify jsx: react in tsconfig
create a wrapper with React rendering (with standalone directive it becomes much simpler btw)
It's just an error from Stackblitz because they have their own vision of typescript compilation.
Here is a link with the same code from Codesandbox
Now, I am stuck for several hours trying to make Storybook work with antd in my new React application (created with create-react-app), without success.
Whatever I do, Storybook does not take the styling of antd.
For example, I created a menu item with antd:
menuNav.tsx:
import React from "react";
import {Menu} from 'antd';
import "antd/dist/antd.less";
const MenuNav = () => {
return (
<Menu mode="horizontal">
<Menu.Item key="menu1">
This is my menu title
</Menu.Item>
</Menu>
)
}
export default MenuNav;
But the result looks like this, no styling at all, but a list:
And as you can see here, it understands that the menu is created by the UI library, but there is no antd styling applied:
This is the story file of MenuNav, 3-Menu.stories.js:
import React from "react";
import MenuNav from '../components/MenuNav';
export default {
title: "MenuNav",
component: MenuNav,
};
export const Text = () => <MenuNav></MenuNav>
I already tried to add a config.js inside ./storybook as suggested here, with no success. Furthermore, I tried adding a webpack.config.js in the same directory as recommended here, same result.
What am I doing wrong?
try adding #import '~antd/dist/antd.css'; to your applications main file, let say index.css which for example is placed in src folder and then add import '../src/index.css'; to .storybook/preview.js
`
I'm having a problem with importing SVG files in React JS.
import { ReactComponent as Logo} from '../logo.svg'
i don't know why but in some components <Logo /> will render correctly
while in other components it doesn't show, the SVG is there when i use inspect and it does take the space it needs but the SVG is blank / empty.
anyone else encountered this issue?
Try:
import { default as logo } from '../logo.svg';
and use as source in a node of type img, like this:
<img src={logo} />
I had the same exact issue and wrapping the logo component in an svg tag or div made it render on to the screen for me. I can also change the SVG color by setting it from the logo as well.
import { ReactComponent as Logo} from '../logo.svg'
<svg><Logo fill="blue" width="100%" height="100%" /></svg>
// or...
<div><Logo fill="blue" width="100%" height="100%" /></div>
Without the <svg> or <div> tag wrapped around it, it was rendering a blank image, taking up the space and all but no visuals. Once I added the wrapper tag around it, it worked. I like this approach since you can dynamically change the SVG styling based on user input.
I had same problem, for some it was how i imported them so I resolved this by using:
import {ReactComponent as Icon} from 'pathtoyourfile.svg
then use as:
<Icon />
Other times however, and I have fallen foul to this a few times, SVG's often have similar class and id names, so if you check the file you might see clip0, image0, pattern0 etc. If you have multiple svg's good chance the ID's and Class names are clashing and are overriding each other. For me the easiest solution was to change the naming convention manually, not sure if a more automated solution exists?
You could do it like so
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I checked, only create-react-app could use SVG as a component
https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
Note: this feature is available with react-scripts#2.0.0 and higher,
and react#16.3.0 and higher.
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
I am using SvgIcon in a react app from material-ui https://material-ui.com/api/svg-icon/. All examples in the document are <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />. I don't know what it is. How can I use this component to render a svg from external file?
I have checked this post How to use an SVG file in a SvgIcon in Material-UI but it doesn't give an answer to load external files.
There is no way to use Path to load external svg. You should use <img /> inside de <Icon> according to this answer in github:
In the '#Christos-Lytras' answer there is an example on how to do it
You may import svg icon as a react component and use this component wrapped inside the SvgIcon component:
import { ReactComponent as Car } from './icons/car.svg'
...
<SvgIcon>
<Car />
</SvgIcon>