How can I import a png image into a nextJS svg component.
This is the sample code I'm working with.
<Page title="Logo Designer" className="max-w-xl">
<div>
<svg id="logoDesigner" width={700} height={600} style={{ backgroundColor: 'lightgray' }}>
<rect class="draggable" x="4" y="5" width="80" height="100" fill="#007bff" />
<rect class="draggable" x="18" y="5" width="80" height="400" fill="#888" />
</svg>
</div>
</Page>
you can use the image tag
<image
width="100"
height="100"
xlink:href="my-logo.png"
/>
make sure to change the width height and xlink:href based on your need
I am using material-icons in React.js like import AccountCircleIcon from '#material-ui/icons/AccountCircle';, but I want to use custom icons. How?
Here simple example:
import React from 'react';
import './Sidebar.css';
import { IconButton } from '#material-ui/core';
import {ReactComponent as ShopWhite} from "./icons/shop.svg";
function Sidebar() {
return (
<div className="sidebar">
<div class="sidebar__header">
<div class="sidebar__headerRight">
<IconButton>
<ShopWhite/>
</IconButton>
</div>
</div>
I am leaving you one example that I currently created for my project. Basically you can create like normal react component and inside your return you can add the svg code. There are many svg chrome extensions that you can directly get svg codes from any website.
import React from 'react';
export interface Props {
className?: string;
}
export default class Barcode extends React.Component<Props> {
render() {
return (
<svg className={this.props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 24"><defs>
<style></style></defs>
<title>barcode</title><g id="Livello_2" data-name="Livello 2">
<g id="NAV_BAR" data-name="NAV BAR">
<path className="cls-1" d="M5,0H1A1,1,0,0,0,0,1V5A1,1,0,0,0,.89,6,1,1,0,0,0,2,5V2H5a1,1,0,0,0,1-.89A1,1,0,0,0,5,0Z"></path>
<path className="cls-1" d="M28,19v3H25a1,1,0,0,0-1,.89A1,1,0,0,0,25,24h4a1,1,0,0,0,1-1V19a1,1,0,0,0-1.11-1A1,1,0,0,0,28,19Z"></path>
<path className="cls-1" d="M29,0H25a1,1,0,0,0-1,.89A1,1,0,0,0,25,2h3V5a1,1,0,0,0,.89,1A1,1,0,0,0,30,5V1A1,1,0,0,0,29,0Z"></path>
<path className="cls-1" d="M5,22H2V19a1,1,0,0,0-.89-1A1,1,0,0,0,0,19v4a1,1,0,0,0,1,1H5a1,1,0,0,0,1-1.11A1,1,0,0,0,5,22Z"></path>
<rect className="cls-1" x="4" y="4" width="2" height="16"></rect>
<rect className="cls-1" x="8" y="4" width="2" height="12"></rect>
<rect className="cls-1" x="12" y="4" width="2" height="12"></rect>
<rect className="cls-1" x="16" y="4" width="2" height="16"></rect>
<rect className="cls-1" x="20" y="4" width="2" height="12"></rect>
<rect className="cls-1" x="24" y="4" width="2" height="16"></rect>
<rect className="cls-1" x="8" y="18" width="2" height="2"></rect>
<rect className="cls-1" x="12" y="18" width="2" height="2"></rect>
<rect className="cls-1" x="20" y="18" width="2" height="2"></rect>
</g></g>
</svg>
)
}
}
I'm using create-content-loader package for creating placeholder loading but can't make it responsive.
How to make svg fill parent content. I don't want to set width hardcoded 1060px. I tried with viewbox property too.
<ContentLoader
height={40}
width={1060}
speed={2}
primaryColor="#d9d9d9"
secondaryColor="#ecebeb"
>
<rect x="10" y="40" rx="0" ry="0" width="75" height="10" />
<rect x="10" y="60" rx="0" ry="0" width="75" height="10" />
<rect x="10" y="100" rx="0" ry="0" width="75" height="10" />
<rect x="10" y="80" rx="0" ry="0" width="75" height="10" />
<rect x="10" y="120" rx="0" ry="0" width="75" height="10" />
<rect x="110" y="40" rx="0" ry="0" width="370" height="125" />
<rect x="275" y="63" rx="0" ry="0" width="72" height="4" />
<rect x="430" y="5" rx="5" ry="5" width="75" height="20" />
<rect x="110" y="10" rx="0" ry="0" width="200" height="15" />
<rect x="10" y="5" rx="4" ry="4" width="75" height="20" />
<circle cx="493" cy="54" r="2" />
<circle cx="497" cy="47" r="7" />
<circle cx="497" cy="77" r="7" />
<circle cx="497" cy="107" r="7" />
</ContentLoader>```
ContentLoader uses html5 canvas for rendering, so viewbox won't work. What I would do is:
add ref to container element (which holds ContentLoader).
get that element width by using ref
pass that value to the ContentLoader width prop.
Keep in mind that on the first render ref.current will be null or undefined
Update:
Also you can try to extract svg from create-content-loader example and turn it into your component. Just change svg attributes to match rect related svg props. Than set css class on svg to have these properties:
.responsive-svg {
width: 100%;
height: auto;
}
Svg (before you turn it into react component) might look something like this:
<svg
role="img"
width="400"
height="160"
aria-labelledby="loading-aria"
viewBox="0 0 400 160"
preserveAspectRatio="none"
>
<title id="loading-aria">Loading...</title>
<rect
x="0"
y="0"
width="100%"
height="100%"
clip-path="url(#clip-path)"
style='fill: url("#fill");'
></rect>
<defs>
<clipPath id="clip-path">
<rect x="48" y="8" rx="3" ry="3" width="88" height="6" />
<rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
<rect x="0" y="56" rx="3" ry="3" width="410" height="6" />
<rect x="0" y="72" rx="3" ry="3" width="380" height="6" />
<rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
<circle cx="20" cy="20" r="20" />
</clipPath>
<linearGradient id="fill">
<stop
offset="0.599964"
stop-color="#f3f3f3"
stop-opacity="1"
>
<animate
attributeName="offset"
values="-2; -2; 1"
keyTimes="0; 0.25; 1"
dur="2s"
repeatCount="indefinite"
></animate>
</stop>
<stop
offset="1.59996"
stop-color="#ecebeb"
stop-opacity="1"
>
<animate
attributeName="offset"
values="-1; -1; 2"
keyTimes="0; 0.25; 1"
dur="2s"
repeatCount="indefinite"
></animate>
</stop>
<stop
offset="2.59996"
stop-color="#f3f3f3"
stop-opacity="1"
>
<animate
attributeName="offset"
values="0; 0; 3"
keyTimes="0; 0.25; 1"
dur="2s"
repeatCount="indefinite"
></animate>
</stop>
</linearGradient>
</defs>
</svg>
I'm trying to use the react-native-svg library particularly with the Symbol element as follows. I used the example code here:
<Svg
height="150"
width="110"
>
<Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
/>
When I run this code, I get the following error in the logs and the app crashes:
<Error>: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[NSRegularExpression enumerateMatchesInString:options:range:usingBlock:]: nil argument'
When I don't use the Symbol object everything works fine. Has anyone run into this issue before?
I was actually able to fix this by copying and pasting the example on this page:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
You need the width and height elements on the Use tag as follows:
<Svg height="150" width="110">
<Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use href="#symbol" x="0" y="0" width="100" height="50"/>
</Svg>
I definitely thought I tried that before, so it may have also been me running the following clear cache and re-compiling commands as well:
rm -rf node_modules && npm install and npm start -- --reset-cache
Either way, problem fixed!
I'm trying to create an angular (1.5.5) directive where the template is an svg element. I read this answer, and several others, but I'm not able to get my simple svg element to show.
I have tried to simplify it as much as possible. So this simple directive should draw a circle when used inside a svg element, at least that is what I'm trying to achieve.
app.directive("svg01", () => {
return {
templateNamespace: "svg",
template: `
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="green" />
`
//template: `
// <svg width="100" height="100">
// <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="white" />
// </svg>
//`
}
});
This does not show the circle with this html
<div style="height: 100px; background-color: lightgreen">
<svg width="100" height="100">
<svg01></svg01>
</svg>
</div>
if instead I change the directive to include the svg element, then it shows (since this is now an html element I assume)
app.directive("svg01", () => {
return {
templateNamespace: "svg",
//template: `
// <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="green" />
//`
template: `
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="white" />
</svg>
`
}
});
<div style="height: 100px; background-color: lightgreen">
<svg01></svg01>
</div>
And it doesn't matter if I set the templateNamespace to "html" or "svg". It shows in either case.
Is it not possible to define an svg template in a directive, and instead I need to add it programmatically as suggested in this answer
What am I missing ?
Thanks
Ahh - I found the problem, and I will post this as an answer instead of modifying my question, adding replace: true and the shape is shown
app.directive("svg01", () => {
return {
replace: true,
templateNamespace: "svg",
template: `
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="yellow" />
`