Where is the icon/img coming from? How did they upload it - reactjs

I am relatively new to coding and helping a project upload an image to their website banner. I know how to do it when the image is directly placed into the files, but I cant seem to figure out where these images are being sourced from. How would I go about uploading a new image?
const Coinsquare: React.FC<SVGProps<SVGSVGElement>> = ({ width = '252', height = '51', ...props }) => (
<svg
width={width}
height={height}
viewBox="0 0 252 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<rect x="0.991934" y="-0.50179932" width="251" height="50" fill="url(#coinsquare_logo)" />
<defs>
<pattern id="coinsquare_logo" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlinkHref="#image0_207_6382" transform="translate(-0.002843) scale(0.000967006 0.00485437)" />
</pattern>
<image
id="image0_207_6382"
width="1040"
height="206"
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBAAAADOCAYAAACHHvG8AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAEEKADA....."
/>
</defs>
</svg>
)
export default Coinsquare

Related

SVG Icon used in ToggleButton from MUI don't get highlight color once it's selected

I have in ToggleButtonGroup five SVG icons rendered, 4 of them are highlighted once are selected as it should be, they have the same color as describing text.
But 1 icon don't change, don't react once it's selected.
It's about
<StyledSideNavigationWrapper>
<StyledToggleButtonGroup
color="warning"
value={alignment}
exclusive
onChange={handleAlignment}
>
<StyledToggleButton
aria-label={TrainDetailsTranslation}
onClick={() => handleGoToDetails()}
value={`/trains/${idTrain}`}
>
<StyledDetailsIcon />
<StyledText>{TrainDetailsTranslation}</StyledText>
</StyledToggleButton>
<StyledToggleButton
aria-label={LinesTranslation}
onClick={() => handleGoToLines()}
value={`/lines`}
>
<StyledLinesIcon />
<StyledText>{LinesTranslation}</StyledText>
</StyledToggleButton>
<StyledToggleButton
aria-label={WheelsTranslation}
onClick={() => handleGoToWheels()}
value={`/trains/${idTrain}/wheels`}
>
<StyledWheelIcon />
<StyledText>{WheelsTranslation}</StyledText>
</StyledToggleButton>
<StyledToggleButton
aria-label={ServiceTranslation}
onClick={() => handleGoToService()}
value={`/trains/${idTrain}/service`}
>
<StyledServiceIcon />
<StyledText>{ServiceTranslation}</StyledText>
</StyledToggleButton>
<StyledToggleButton
aria-label={AlertsTranslation}
onClick={() => handleGoToAlerts()}
value={`/trains/${idTrain}/alerts`}
>
<StyledErrorIcon />
<StyledText>{AlertsTranslation}</StyledText>
</StyledToggleButton>
</StyledToggleButtonGroup>
</StyledSideNavigationWrapper>
Marked icon should be in orange color.
I guess it's connected to SVG file.
In one working icone code is like:
<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12.28 13.3L18.28 19.3L20.39 17.14L14.39 11.14L12.28 13.3ZM16 8.1C15.61 8.1 15.19 8.05 14.86 7.91L3.46999 19.25L1.35999 17.14L8.76999 9.74L6.99999 7.96L6.27999 8.66L4.82999 7.25V10.11L4.12999 10.81L0.609985 7.25L1.30999 6.55H4.11999L2.71999 5.14L6.27999 1.58C6.55654 1.30195 6.88532 1.08131 7.24743 0.93075C7.60953 0.78019 7.99783 0.702682 8.38999 0.702682C8.78215 0.702682 9.17044 0.78019 9.53255 0.93075C9.89465 1.08131 10.2234 1.30195 10.5 1.58L8.38999 3.74L9.79999 5.14L9.08999 5.85L10.88 7.63L12.7 5.75C12.56 5.42 12.5 5 12.5 4.63C12.496 4.16832 12.5837 3.71045 12.7579 3.2829C12.9322 2.85535 13.1895 2.46662 13.515 2.13922C13.8406 1.81183 14.2278 1.55228 14.6544 1.37561C15.0809 1.19894 15.5383 1.10866 16 1.11C16.59 1.11 17.11 1.25 17.58 1.53L14.91 4.2L16.41 5.7L19.08 3.03C19.36 3.5 19.5 4 19.5 4.63C19.5 6.55 17.95 8.1 16 8.1Z" fill="currentColor"/>
</svg>
But one which is not working looks totally different. What should be changed there to make it work ?
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="40" height="40" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_4495_107104" transform="scale(0.00195312)"/>
</pattern>
<image id="image0_4495_107104" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAAAl
And here is very long code
Vk9uMQYN4uX4N7+d+df91BOg9f79e7XX6cDLwSt+GFUGz/Dwx76y6f1K6jAAAAAElFTkSuQmCC"/>
</defs>
</svg>
thanks a lot

How can I use this SVG in React without getting any error?

I want to use JavaScript SVG as an icon. However, I keep getting this error. I fixed one error by changing xmls:xlink into xmlsXlink. However, it did not work same for xml:space.
SVG code
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 85 85"
style="enable-background:new 0 0 85 85;"
xml:space="preserve"
>
<polygon
class="st0"
points="6.3,1.2 13,75.4 42.4,83.8 72.1,75.4 78.9,1.2"
fill="#FFF"
/>
<g>
<g transform="translate(4.988 -113.385)">
<path
d="M7.1,189.8l-6.9-76.4H75l-7,76.4l-30.6,8.6L7.1,189.8z M62.4,185.6l5.8-65.5H37.6l0.2,72.2 L62.4,185.6z M34.7,129.8h-7.4L27.2,169l-14.5-4v9l21.9,5.9L34.7,129.8L34.7,129.8z"
fill="#D4B830"
/>
<path
d="M32.3,179.2c-1-0.3-5.7-1.6-10.6-2.9l-8.8-2.4v-4.4c0-4.3,0-4.4,0.4-4.3 c0.2,0.1,3.4,1,7.1,2l6.7,1.8l0.1-19.5l0.1-19.5h7.3v24.9c0,19.7-0.1,24.9-0.3,24.9C34.2,179.7,33.2,179.4,32.3,179.2L32.3,179.2z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0"
enable-background="new"
/>
<path
d="M12.8,174v-9c0,0,9.2,2.6,14.4,3.9l0.1-39.1h7.4v50.1L12.8,174L12.8,174z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0.9216"
enable-background="new"
/>
<path
d="M37.6,120.2h30.6l-5.8,65.5l-24.8,6.7V120.2z M60.8,174.6l2-24.5L48,151.8v-13.1l15.9-0.1 l0.6-8.9l-23.9,0.1l0.3,32.5l14.5-2.5l-0.2,7.2l-14.7,4l0.1,8.9L60.8,174.6L60.8,174.6z"
fill="#FDD83C"
/>
</g>
</g>
</svg>
You've no text in the file so just remove the xml:space attribute altogether.

How to render svg icons in react

var filled_lock = ' <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --><title>Locked</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon/Locked/Filled/Light"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="-1" y="-1" width="15" height="15"></rect><g id="Icon/Locked/Filled/Dark" transform="translate(-1.000000, -1.000000)"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="0" y="0" width="15" height="15"></rect><g transform="translate(3.000000, 1.000000)" fill="#668cb3"><path d="M7.75,5.5 L2.25,5.5 L2.25,3.25 C2.25,1.73365625 3.483875,0.5 5.0005,0.5 C6.51659375,0.5 7.75,1.73365625 7.75,3.25 L7.75,5.5 Z M5.25,9.4685 L5.25,10.5 L4.75,10.5 L4.75,9.4685 C4.3186875,9.35746875 4,8.9659375 4,8.5 C4,7.94771875 4.44771875,7.5 5,7.5 C5.55228125,7.5 6,7.94771875 6,8.5 C6,8.9659375 5.6813125,9.35746875 5.25,9.4685 Z M8.25,5.5 L8.25,3.25 C8.25,1.4553125 6.7949375,0 5.0005,0 C3.2050625,0 1.75,1.4553125 1.75,3.25 L1.75,5.5 L0,5.5 L0,13 L10,13 L10,5.5 L8.25,5.5 Z" id="Fill-1"></path><path d="M5,8 C4.7243125,8 4.5,8.2243125 4.5,8.5 C4.5,8.7756875 4.7243125,9 5,9 C5.2756875,9 5.5,8.7756875 5.5,8.5 C5.5,8.2243125 5.2756875,8 5,8" id="Fill-3"></path></g></g></g></g></svg> ';
This var filled_lock is my svg icon which Im trying to render in a div but it's not showing it up
I tried putting it in <img src={filled_lock} /> still it doesn't show up
I tried <div dangerouslySetInnerHTML={{__html:{filled_lock}}} /> still no success
Does anyone know how we can render it in react
So investigating it further I saw that using quotes in the filled_lock was showing the string itself. On removing the string it was failing due to this reason. Which when I fixed gave me the desired output
New code
var filled_lock = <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --><title>Locked</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon/Locked/Filled/Light"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="-1" y="-1" width="15" height="15"></rect><g id="Icon/Locked/Filled/Dark" transform="translate(-1.000000, -1.000000)"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="0" y="0" width="15" height="15"></rect><g transform="translate(3.000000, 1.000000)" fill="#668cb3"><path d="M7.75,5.5 L2.25,5.5 L2.25,3.25 C2.25,1.73365625 3.483875,0.5 5.0005,0.5 C6.51659375,0.5 7.75,1.73365625 7.75,3.25 L7.75,5.5 Z M5.25,9.4685 L5.25,10.5 L4.75,10.5 L4.75,9.4685 C4.3186875,9.35746875 4,8.9659375 4,8.5 C4,7.94771875 4.44771875,7.5 5,7.5 C5.55228125,7.5 6,7.94771875 6,8.5 C6,8.9659375 5.6813125,9.35746875 5.25,9.4685 Z M8.25,5.5 L8.25,3.25 C8.25,1.4553125 6.7949375,0 5.0005,0 C3.2050625,0 1.75,1.4553125 1.75,3.25 L1.75,5.5 L0,5.5 L0,13 L10,13 L10,5.5 L8.25,5.5 Z" id="Fill-1"></path><path d="M5,8 C4.7243125,8 4.5,8.2243125 4.5,8.5 C4.5,8.7756875 4.7243125,9 5,9 C5.2756875,9 5.5,8.7756875 5.5,8.5 C5.5,8.2243125 5.2756875,8 5,8" id="Fill-3"></path></g></g></g></g></svg>;
For output:
<div>{filled_lock}</div>
Use react-svg for this:
import { ReactSVG } from 'react-svg';
<ReactSVG src={filled_lock} />
You can save svg image in an *.svg file and import it as:
import filled_lock from './filled_lock.svg';
function App() {
return (
<img src={filled_lock} alt="filled_lock" />
);
}
Or
import { ReactComponent as FilledLock } from './filled_lock.svg';
function App() {
return (
<FilledLock />
);
}
Docs

Why isn't fill working on my svg when using props?

I expect the svg to turn red but it isn't changing at all from the color #D8D8D8. I see the fill in the svg and if I turn this into a parameter I can use it then, but I'd rather just set the fill using React props so I can set a hover via my css:
The svg code (which I got my my Sketch export):
<svg width="57px" height="33px" viewBox="0 0 57 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Rectangle</title>
<g id="Design" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Mobile-Copy-6" transform="translate(-196.000000, -69.000000)" fill="#D8D8D8">
<rect id="Rectangle" x="196" y="69" width="57" height="33"></rect>
</g>
</g>
</svg>
My react code:
import { ReactComponent as Logo } from "../../assets/rect.svg";
export const Example = () => {
return (
<div>
<Logo fill="#C94141" />
</div>
);
};
I used create-react-app with the typescript template and the Logo is identified as the type:
React.FunctionComponent<React.SVGProps<SVGSVGElement>
you need to create you Logo as a component with passing props to it which you want to keep dynamic. Try creating a component like:
export default ({ fill = '#D8D8D8' }) => (
<svg width="57px" height="33px" viewBox="0 0 57 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Rectangle</title>
<g id="Design" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Mobile-Copy-6" transform="translate(-196.000000, -69.000000)" fill={fill}>
<rect id="Rectangle" x="196" y="69" width="57" height="33"></rect>
</g>
</g>
</svg>
);
and then use this component simply by
import Logo from "../../components/logo.js";
export const Example = () => {
return (
<div>
<Logo fill="#C94141" />
</div>
);
};

How to use a custom SVG file in material ui SVG ICON

I am trying to use a chip with SVG delete icon,
The icon code is
const icon = (props) => {
return (
<SvgIcon>
<img src={'ic_check.svg'} style={{width: '20px'}} width={'20px'}/>
</SvgIcon>
)
};
The content of SVG file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
and the chip finally is
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {}}
deleteIcon={<icon/>}/>
But this is not working and I checked for the path and it is correct as I can render same svg in img tag.
Nayan SvgIcon takes a svg path that you can further style. But in your case your svg is already styled. It doesn't take svg file directory path which actually lose SvgIcon API purpose.
You just need to remove SvgIcon from img tag:
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {console.log('You Deleted this icon')}}
deleteIcon={icon}
/>
and Make you svg as const or import from assets file directory I haven't tried that,
const icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
There is a reason why we can't make <icon/> component. If we make it as component as following:
const Icon = (props) => {
return (
<SvgIcon>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"
/>
<path d="M0 0h24v24H0z" />
</g>
</svg>
</SvgIcon>
)
};
It works like a charm but onDelete doesn't get fired on this component.I've reported this issue as well on material UI. In first case onDelete gets called every time. Feel free to ask any question.
EDITED Fixed the above issue for Icon as Component rather than const. here is the codesandbox link for working example:
https://codesandbox.io/s/98842r4yy4
I am using React and typescript, created a component and added the tags from HTML and it worked normally.
export const IconTable: React.FC = () => {
return (
<svg width="130" height="130" viewBox="0 0 1024 1024">
<path d="M505.947 123.597a23.096 23.096 0 0 0-16.99-7.477h-6.837c-17.929 0-32.631 13.468-34.198 "/>
</svg>
);

Resources