How can I use SVG in React Native? - javascript

I am trying to use bootstrap icons in react native and I can't find any useful methods on how to render an SVG in react-native. Does anyone know how to?

To Add SVGs in react native you can use react-native-svg
Install:
yarn add react-native-svg
Example:
import Svg, {
Circle,
Ellipse,
G,
Text,
TSpan,
TextPath,
Path,
Polygon,
Polyline,
Line,
Rect,
Use,
Image,
Symbol,
Defs,
LinearGradient,
RadialGradient,
Stop,
ClipPath,
Pattern,
Mask,
} from 'react-native-svg';
/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/
import React from 'react';
import { View, StyleSheet } from 'react-native';
export default class SvgExample extends React.Component {
render() {
return (
<View
style={[
StyleSheet.absoluteFill,
{ alignItems: 'center', justifyContent: 'center' },
]}
>
<Svg height="50%" width="50%" viewBox="0 0 100 100">
<Circle
cx="50"
cy="50"
r="45"
stroke="blue"
strokeWidth="2.5"
fill="green"
/>
<Rect
x="15"
y="15"
width="70"
height="70"
stroke="red"
strokeWidth="2"
fill="yellow"
/>
</Svg>
</View>
);
}
}
Or you want to import an svg to your app use: react-native-svg-transformer
Example:
import Logo from "./logo.svg";
<Logo width={120} height={40} />
But if you want an icon library you can use : react-native-vector-icons
Also here is the directory: React Native Vector Icons directory

I just found out an easy way to solve this problem that works for me.
I'm using Expo and I have react-native-svg installed. Note that this is different from importing SvgUri from react-native-svg-uri. That is a different library.
import { SvgUri } from "react-native-svg";
<SvgUri
uri="https://example.com/uploads/apple.svg"
width="40%"
height="40%"
/>

Recommond Parcel
const logo = new URL('logo.svg', import.meta.url);
export function Logo() {return <img src={logo} alt="logo" />}

Related

How to scale up and SVG from with in path instead of adding width and height?

I have this icon in the following code , the problem with this icons is it has a big, margin all over, and in my case I want it to get that margin to be smaller, or the icon a litter bigger, ,instead of increasing the general size as you will see the current implementation in the code.
any idea how to achieve this I tried some solutions but none has worked.
import { ReactComponent as icon } from '../../Img/icon.svg';
// style
const iconStyle = {
padding: 0,
marginTop: -5,
backgroundColor: '#ef6c00',
fill: 'white',
};
// inside the component
<icon style={iconStyle} width='24' height='24' />
you can open your svg into your editor and edit the svg tag directly.
for example here is the circle svg :
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

How do I use SVGs for background images on buttons in React

First timer on stack overflow so I'll try my best.
I'm trying to dynamically add SVGs as background images for my buttons.
Created react app using create-react-app.
I have 3~ files in question: poland.svg, Flag.jsx and exampleComponent.jsx
exampleComponent.jsx
import React from 'react';
import Flag from './Flag.jsx';
const exampleComponent = (props) => {
const backgroundImage = {
backgroundImage: `url(${Flag(props.nation)})`
}
return(
<button style={backgroundImage}>
<div />
</button>
)
}
export default exampleComponent;
Flag.jsx
import Poland from './poland.svg';
import US from './us.svg';
const Flag = (nation) => {
let path = "";
if (nation === "Poland") path = Poland;
else if (nation === "US") path = US;
return path;
}
export default Flag;
poland.svg
<svg
height="100%"
width="100%"
>
<defs />
<rect fill="#ffffff" width="100%" height="50%" />
<rect transform="translate(0, 50px)" fill="#ff0000" width="100%" height="50%" />
</svg>
I'm getting the file path /static/media/poland.49b43928.svg
When I inspect the element in chrome the correct file path is shown but the SVG isn't being loaded!
IM STILL A NOOB! so please be harsh! ;D
Update! So the file was being sent in XML format.. I wish I knew more to explain the details but all I did to fix this was add:
xmlns="http://www.w3.org/2000/svg"
to the svg tags like so:
<svg
height="100%"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs />
<rect fill="#ffffff" width="100%" height="50%" />
<rect transform="translate(0, 50px)" fill="#ff0000" width="100%" height="50%" />
</svg>
If the svg files are similar, there may be a problem with matching the
<use xlink ID:href="#xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"/>,
where xxxxxxxx-xxxx-xxxx-xxxx-xxxx-xxxxxxxxxx is the ID, it must be unique for each file.
See the link, it may help
https://github.com/SilverFox70/svg-react-loader

How we can reduce the number of svg icons inside React project?

I am working on a project which have around 100 icons inside the assets/icons folder. Some icons are quite similar such as trash(delete) icon with blue and red colour, and check icon with three different colour.
How we can pass the colour as props inside svg file. So that we can reduce the number of icon as much as possible.
Note : We don't want to make specific react component and pass the colour as props.
Here is an working example of my code. className="fill-red" will fill the colour in whole <svg /> . But how we can fill the colour in it's nested element like in <path/> or might be <rect/>
import { ReactComponent as Cross } from 'assets/icons/cross.svg';
import React from 'react';
const Alert = (props) => {
return (
<div>
<div className="flex items-start">
<Error className="mr-2 fill-red" />
{props.label}
</div>
</div>
);
};
export default Alert;
Here is my cross.svg
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.205 4.71967C15.4978 5.01256 15.4978 5.48744 15.205 5.78033L11.023 9.96229L15.205 14.1443C15.4979 14.4372 15.4979 14.9121 15.205 15.205C14.9121 15.4978 14.4372 15.4978 14.1443 15.205L9.96233 11.0229L5.78033 15.205C5.48744 15.4978 5.01256 15.4978 4.71967 15.205C4.42678 14.9121 4.42678 14.4372 4.71967 14.1443L8.90167 9.96229L4.71971 5.78033C4.42682 5.48744 4.42682 5.01256 4.71971 4.71967C5.0126 4.42678 5.48748 4.42678 5.78037 4.71967L9.96233 8.90163L14.1443 4.71967C14.4372 4.42678 14.9121 4.42678 15.205 4.71967Z"/>
</svg>

What should I use to show live icons in React OR Javascript? Like how much coffee is filled in a mug?

I want to create dashboard with lots of live icons. Live icons means icons content will change dynamically.
For example:- Let say i have an icon of a coffee cup, based upon number of coffee sold the coffee level in cup goes up.
I tried solving it using SVG & CSS. Below is the live code-sandbox DEMO example. (same code I am posting below)
https://codesandbox.io/s/fill-coffee-to-svg-1sfb0
what exactly I am doing is on top of SVG component i using div node and applying css on the div tag.
Issue is that, It is very difficult to manage path/points dynamically in SVG, also for different screen version it will be difficult.
Can anyone suggest any better approach for this.
import ReactDOM from "react-dom";
import React, { Component } from "react";
class Todo extends Component {
state = { height: 4 };
setHeight = (e, fillType) => {
e.preventDefault();
console.log(this.state.height);
if (this.state.height < 100) {
if (fillType === "fill") {
this.setState({
height: this.state.height + 2
});
}
}
if (this.state.height >= 2) {
if (fillType === "drink") {
this.setState({
height: this.state.height - 2
});
}
}
};
render() {
return (
<div>
<svg width="255" height="224" xmlns="http://www.w3.org/2000/svg">
<g>
<rect
fill="#fff"
id="canvas_background"
height="226"
width="257"
y="-1"
x="-1"
/>
<g
display="none"
overflow="visible"
y="0"
x="0"
height="100%"
width="100%"
id="canvasGrid"
>
<rect
fill="url(#gridpattern)"
stroke-width="0"
y="0"
x="0"
height="100%"
width="100%"
/>
</g>
</g>
<g>
<title>Layer 1</title>
<path
stroke="#000"
id="svg_1"
d="m78.82963,176.75921l97.93778,0c14.11708,-0.03733 23.74788,-17.00704 23.70086,-34.46505l0,-11.73873c27.94999,-0.03136 48.22814,-30.02253 48.21769,-64.99381c0.01045,-35.59398 -19.86965,-64.83701 -43.00946,-64.81162l-150.95938,0l0,141.54714c0.02194,19.22158 11.60543,34.42772 24.1125,34.46207zm121.63551,-149.38391l0,0l5.20823,0c19.14875,-0.04331 25.29102,25.83983 25.19908,38.38045c0.01881,20.24897 -10.47393,39.66916 -30.40731,37.78463l0,-76.16508zm-199.71514,158.00316c0.01776,26.16387 13.9729,38.29683 25.20535,38.37149l202.59351,0c13.39827,-0.07466 25.14161,-15.13147 25.20117,-38.37149l-253.00002,0z"
stroke-width="1.5"
fill="#fff"
/>
</g>
</svg>
<div
style={{
position: "absolute",
left: "63px",
top: "9px",
height: "175px",
width: "145px",
borderBottomLeftRadius: "25px",
borderBottomRightRadius: "25px",
overflow: "auto"
}}
>
<div
style={{
height: this.state.height + "%",
width: "100%",
position: "absolute",
bottom: "0",
zIndex: 1000,
background: "green",
transition: "all .4s"
}}
/>
</div>
<button onClick={e => this.setHeight(e, "fill")}>
fill more cofee +
</button>
<button onClick={e => this.setHeight(e, "drink")}>drink cofee -</button>
</div>
);
}
}
ReactDOM.render(<Todo />, document.getElementById("root"));
Have you tried using the react-spring library?
In the basics section of react-spring documentation (can be found here - https://www.react-spring.io/docs/hooks/basics) this code snippet is given:
const props = useSpring({ x: 100, from: { x: 0 } })
return (
<animated.svg strokeDashoffset={props.x}>
<path d="..." />
</animated.svg>
)
Using your example of your coffee mug, if you would render your mug separate to the coffee filling the mug, with the coffee stroke being upwards, then you could use this technique to animate the coffee height.
Edit:
As you are using a class component you will want to use the render props API for this - https://www.react-spring.io/docs/props/spring
<Spring
from={{ x: 100 }}
to={{ x: 0 }}>
{props => (
<svg strokeDashoffset={props.x}>
<path d="..." />
</svg>
)}
</Spring>

How to mask user image in SVG hexagon shape on react native

I am struggling with hexagon shape on react native can anyone have some idea about how does it work using svg in react native or any alternate way?
creating shapes using js
image cutout of hexagon
masking image[enter image description here][1]
I'm trying this below image.
https://i.stack.imgur.com/MLDFl.jpg
This is My code:
render() {
return (
<Svg
height="300"
width="300"
viewBox="0 0 860 860"
>
<Defs>
<ClipPath id="clip">
<Polygon
strokeWidth="2"
stroke="#979797"
strokeDasharray='8,8'
strokeLinecap='butt'
fill="rgba(0, 0, 0, 0.5)"
points="258.5,223.999 130.5,298 2.5,224 2.5,76 130.5,2 258.5,76 " />
</ClipPath>
</Defs>
<Image
x="0%"
y="0%"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
opacity="0.5"
href={require('./assets/Image.jpg')}
clipPath="url(#clip)"
/>
</Svg>
);
}
This kind of image can be created with my react-native-image-filter-kit module:
import { Image } from 'react-native'
import { DstATopComposition } from 'react-native-image-filter-kit'
const style = { width: 320, height: 320 }
const masked = (
<DstATopComposition
dstImage={
<Image
style={style}
source={{ uri: 'https://i.stack.imgur.com/MLDFl.jpg' }}
/>
}
srcImage={
<Image
style={style}
source={{ uri: 'http://www.myiconfinder.com/uploads/iconsets/256-256-53d5151ca4f467ed9951f85024881c85.png' }}
/>
}
/>
)
Note that shape generation is not supported currently, so you need to use another image for masking.

Categories

Resources