I am using gulp-iconfont to convert a set of svg icons to a woff font.
Before the icon is converted into the font it looks as follows:
How it appears in the woff file:
My gulp task is as follows:
gulp.task('icon-font', function() {
gulp.src([paths.icons + '*.svg'])
.pipe(iconfont({
fontName: 'icons',
formats: ['woff'],
timestamp: timestamp,
appendUnicode: true
}))
.on('glyphs', function(glyphs, options) {
gulp.src(paths.templates + '/_icons.scss')
.pipe(template({ glyphs: glyphs, timestamp: timestamp }))
.pipe(gulp.dest(paths.styles));
})
.pipe(gulp.dest(paths.fonts + 'icons/')
);
});
My Illustrator export settings:
SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-183 185 32 32" style="enable-background:new -183 185 32 32;" xml:space="preserve">
<g>
<path d="M-175.6,190.5c-0.3-0.3-0.9-0.3-1.3,0c-4.7,4.7-4.7,12.4,0,17.1c0.2,0.2,0.5,0.5,0.7,0.7c0,0.1-0.1,0.2-0.1,0.3v6.7h-2.9
c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.6c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9h-2.9v-5.7c1.8,1.1,3.9,1.6,6.1,1.6
c3.2,0,6.3-1.3,8.5-3.5c0.2-0.2,0.3-0.4,0.3-0.6c0-0.2-0.1-0.5-0.3-0.6L-175.6,190.5z M-168.3,209.3c-2.7,0-5.3-1.1-7.3-3
c-3.8-3.8-4-9.8-0.6-13.9l14.5,14.5C-163.5,208.5-165.9,209.3-168.3,209.3z"/>
<path d="M-168,192.8c3.6,0,6.6,3,6.6,6.6c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9c0-4.6-3.8-8.4-8.4-8.4
c-0.5,0-0.9,0.4-0.9,0.9C-168.9,192.4-168.5,192.8-168,192.8z"/>
<path d="M-157.8,189.1c-2.7-2.7-6.2-4.1-10-4.1c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9c3.3,0,6.4,1.3,8.7,3.6
c2.3,2.3,3.6,5.4,3.6,8.7c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9C-153.6,195.3-155.1,191.8-157.8,189.1z"/>
</g>
</svg>
Any ideas are appreciated.
Update:
Following some advice in #nfroidure I made them all 300px x 300px and now I am getting this and added the following options fontHeight: 16 and normalize: true. Which is producing the following:
Your SVGs seems too small. Try to increase their size or use the fontHeight (> 1000) + normalize options to strech them up.
Related
I am trying to import a local SVG file in React but I keep coming across this error:
My code looks like this:
import React from "react";
import styled from "styled-components";
import { ReactComponent as Logo } from "./images/logo.svg";
const MainImage = styled.div`
height: 400px;
width: 100%;
background: #026857;
`;
const Home = () => {
return (
<div className="home">
<MainImage>
<Logo />
</MainImage>
</div>
);
};
export default Home;
I have tried many solutions offered by others such as importing default as Logo, creating an image prop to contain the local svg (<img src={'./images/logo.svg'}/> ) but none have given me any success so far. I believe I may have to add something to my Webpack config file but I'm not sure what it is and where I should put it, as the config file is nearly 800 lines of code.
Also, I am using SVG files from https://undraw.co/ if the information helps, it seems their illustrations have many tags in them which I have not seen in simple SVG icons.
<svg
id="f6dc6f51-58d1-4328-a543-5a2c5176acea"
dataName="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="922.18516"
height="747.35665"
viewBox="0 0 922.18516 747.35665"
>
<path
d="M420.91148,313.56734c-2.67984,100.75634,131.62869,203.61052,299.27661,203.61052S1154.817,318.5411,1028.01831,313.56734c-244.32514-9.5838-328.052-110.77046-303.55341-182.5C768.33985,2.60566,426.18809,115.17786,420.91148,313.56734Z"
transform="translate(-138.90742 -76.32167)"
fill="#3f3d56"
/>
<polygon
points="505.004 157.445 502.96 156.144 504.261 154.1 503.703 153.746 502.403 155.79 500.359 154.489 500.004 155.046 502.048 156.347 500.747 158.391 501.305 158.746 502.605 156.702 504.649 158.002 505.004 157.445"
fill="#fcce33"
/>
<polygon
points="657.004 305.445 654.96 304.144 656.261 302.1 655.703 301.746 654.403 303.79 652.359 302.489 652.004 303.046 654.048 304.347 652.747 306.391 653.305 306.746 654.605 304.702 656.649 306.002 657.004 305.445"
fill="#fcce33"
/>
...
assuming you are using Webpack 5, you need to configure your webpack loader to something like this using asset modules:
module: {
rules: [
{
test: /\.svg$/i,
type: 'asset/resource',
},
...
]
}
if you are using webpack 4, you can use file-loader instead of asset/resource:
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'file-loader',
},
],
},
...
]
}
then you can import your svg file like this:
import Logo from "./images/logo.svg";
//...
return <img src={Logo} />
I usually always convert each SVG into its own component like so
import * as React from "react";
const ArrowDownSVG = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
strokeWidth={2}
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
viewBox="0 0 24 24"
{...props}
>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M6 9l6 6 6-6" />
</svg>
);
export default ArrowDownSVG;
Has worked for me in the past year or so
By leaving out the type for the props, you can use this in plain JS as well
I've created a pie chart using react and svg circles. Now I want to position the text labels so that the text starts close to the middle of the circle and continue outwards, wheel of fortune style.
This is my code, rendering the svgs. In chrome dev tools I tried to apply tranform: rotate(45deg); and adjusting the number but the text keeps flyying away outside the circle.
<svg viewBox="0 0 32 32">
{elements.map((element, index) => (
<g>
<circle
key={_id}
r={16 / 1.0053}
cx={'50%'}
cy={'50%'}
style={{
strokeDasharray: `${percentage}, 100.53`,
strokeDashoffset: -offset,
stroke: segmentColor,
}}
textAnchor="middle"
></circle>
<text
textAnchor="middle"
x={'50%'}
y={'50%'}
fontFamily={'sans-serif'}
fontSize={'20px'}
fill="black"
textAnchor="start"
>
{title}
</text>
</g>
))}
</svg>
```
The issue is that rotation is about the origin, which is the top left of your image. The easiest way around this is to change the viewBox so the origin is in the center of your SVG: viewBox="-16 -16 32 32".
Then you calculate the angle based on the offset and the percentage.
I assume you have some elements like this:
const elements = [
{ percentage: 15, offset: 0, title: 'title', segmentColor: 'red' },
{ percentage: 40, offset: 15, title: 'another title', segmentColor: 'blue' },
{ percentage: 25, offset: 55, title: 'and another', segmentColor: 'green' },
{ percentage: 20, offset: 80, title: 'yet another', segmentColor: 'black' },
];
So something like this would work:
<svg viewBox="-16 -16 32 32">
{elements.map((element, index) => {
const angle = (element.offset + element.percentage / 2) * 360 / 100;
return <g key={index}>
<circle
r={15.5}
style={{
fill: 'none',
strokeDasharray: `${element.percentage}, 100.53`,
strokeDashoffset: -element.offset,
stroke: element.segmentColor,
}}
textAnchor="middle"
></circle>
<text
x="10%"
transform={`rotate(${angle})`}
fontFamily={'sans-serif'}
fontSize={'2px'}
fill="black"
textAnchor="start"
alignmentBaseline="middle"
>
{element.title}
</text>
</g>
})}
</svg>
Now the x value on the text determined how from the center the text starts.
I work with a Leaflet map that displays multiple circle markers when page is loaded. But users have found it a bit difficult to click/touch on the circle markers on mobiles and Ipads. Is there a way to increase the select "area" for these circle markers?
This runnable code demonstrates the use of SVG to make the marker's icon that can be your solution:
var clatlng = [15, 100];
var zoom = 8;
var mymap = L.map("mapid").setView(clatlng, zoom);
//This map tiles is simple and no hassles.
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "Map data © OpenStreetMap contributors"
}).addTo(mymap);
const svg_O =
'<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" stroke="none" opacity="0.35" fill="yellow"/><circle cx="50" cy="50" r="15" stroke="blue" fill="green"/></svg>';
const svgpin_O = encodeURI("data:image/svg+xml;utf-8," + svg_O);
const icon_O = L.icon({
iconUrl: svgpin_O,
iconSize: [100, 100],
iconAnchor: [50, 50]
});
var marker1 = L.marker(clatlng, {
icon: icon_O,
draggable: true,
autoPan: true
}).addTo(mymap);
const svg_pin =
'<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" fill="firebrick"></path></svg>';
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin);
const svgpin_Icon = L.icon({
iconUrl: svgpin_Url,
iconSize: [24, 24],
iconAnchor: [12, 24],
popupAnchor: [0, -22]
});
var marker2 = L.marker(clatlng, {
icon: svgpin_Icon,
draggable: true,
autoPan: true
}).addTo(mymap);
#mapid {
height: 200px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<div id="mapid"></div>
We have a Singe Page Application using AngularJS 1.5 and it works smoothly using Chrome but unfortunately we also support IE 11+ and probably Edge and using these browsers, the performance is close to horrible (more than two seconds delay). It seems that it has something to do with the way we are using css sprites because if I remove the background-image property everything works smoothly again. My experience on css is not very high thus I hope that somebody with a deeper insight has a hint about performance optimizations. The sprite svg file (325KB 2350px x 2340px) looks like this
<?xml version="1.0" encoding="utf-8"?>
<!-- SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2350 2340" enable-background="new 0 0 2350 2340" xml:space="preserve">
<symbol id="ic_x5F_website_x5F_blk" viewBox="0 -50 50 50">
...
<use xlink:href="#ic_x5F_website_x5F_blk" width="50" height="50" id="XMLID_496_" x="0" y="-50" transform="matrix(1 0 0 -1 284.9999 155)" overflow="visible"/>
...
</svg>
And the relevant css/ less styles are
.ico() {
&:extend(.ic-mixin);
}
.ic {
.ic-mixin;
}
.ic-mixin {
background-image: url('../icons/spritesheet.svg');
background-size: #spritesheet-width #spritesheet-height;
display: inline-block;
width: 50px;
height: 50px;
}
.icon(#column, #row, #color: blk, #offset: 0px, #offsetY: #offset) {
.createIcon(#column, #row, #color, #offset, #offsetY);
}
.createIcon(#column, #row, #color, #offsetX: 0, #offsetY: #offsetX) {
#positionX: #initIconGapX + #iconColumnWidth * (#column - 1);
#positionY: #initIconGapY + #iconOuterSize * (#row - 1);
& when (#color = wht) {
background-position: -(#positionX + #iconOuterSize + #offsetX) -(#positionY + #offsetY);
}
& when (#color = blu) {
background-position: -(#positionX + #iconOuterSize * 2 + #offsetX) -(#positionY + #offsetY);
}
}
.icon-virtual {
&:after {
.ico();
.icon(4, 23, wht, 15px);
content: ' ';
width: 20px;
height: 20px;
background-color: #green;
position: absolute;
top: 2px;
right: 2px;
}
}
Why is Chrome so much faster? Is this a cache problem? Is IE trying to fetch the huge file over and over again? Could there be a problem with the svg file itself? Or is the css to complicated? Are we missing some important properties? Is IE too slow finding the correct background position?
Thanks a lot for any hint!
UPDATE
Exchanging the big file with a different much smaller svg does not help in improving the performance.
I want to use SVG icons in my React Native project. I'm requiring it like:
var svg = require('../images/Upvote.svg');
But i'm getting this error:
Unable to resolve module ../images/Upvote.svg from
/path/to/my/project/js/Component.js: Invalid directory
/path/to/my/project/images/Upvote.svg
Am i suppose to add/change something in Xcode project settings?
BTW, everything is fine if i'm using PNG image, no errors..
SVGs are not supported in React Native at this point. There are a few libraries out there they played with the idea but I don't know that any of them are "production ready"
https://github.com/brentvatne/react-native-svg
https://github.com/aksonov/react-native-svg-elements
I use react native SVG and a small my own component for showing SVG.
If the files SVG are too much I think solution with icoMoon is more complex but better.
Solution here:
Which is the best approach to insert an vector (svg) graph into a react native application
This is my own component that usually use when I use few SVG files in my app.
import React from 'react';
import Svg,{
Circle,
Ellipse,
G,
LinearGradient,
RadialGradient,
Line,
Path,
Polygon,
Polyline,
Rect,
Symbol,
Text,
Use,
Defs,
Stop
} from 'react-native-svg';
const CarParkSensor = (width, height) => <Svg height={height} width={width} fill="none" viewBox="0 0 193 163">
<Rect height="163" width="193" fill="black" fillOpacity="0"/>
<Rect height="34.2896" width="22.357" fill="black" fillOpacity="0" transform="translate(149.607 15.691)"/>
<Rect height="34.2896" width="22.357" fill="black" fillOpacity="0" transform="translate(149.607 15.691)"/>
<Path d="M161.324 15.691H151.904C150.498 15.691 149.607 16.5825 149.607 17.5675H149.607V48.0573C149.607 49.3238 151.107 49.9806 152.653 49.9806C154.153 49.9806 155.7 49.3242 155.7 48.0573V37.1749H160.95C167.136 37.1749 171.964 34.2194 171.964 26.5267V26.2456C171.964 18.5525 167.277 15.691 161.324 15.691ZM165.87 26.996C165.87 30.6547 163.996 32.3905 160.949 32.3905H155.7V21.0387H160.949C163.996 21.0387 165.87 22.7745 165.87 26.4331V26.996Z" fill="black"/>
<Rect height="18.5061" width="68.2308" fill="black" fillOpacity="0" transform="translate(43.0472 13.8017)"/>
<Rect height="18.5061" width="68.2308" fill="black" fillOpacity="0" transform="translate(43.0472 13.8017)"/>
<Path d="M110.473 27.6106C101.575 18.7057 89.7458 13.8017 77.1628 13.8017C64.5798 13.8017 52.7503 18.7057 43.8527 27.6106C42.7788 28.685 42.7788 30.4272 43.8527 31.502C44.9263 32.5765 46.667 32.5765 47.7406 31.502C55.5996 23.6369 66.0484 19.3052 77.1624 19.3052C88.2764 19.3052 98.7255 23.6369 106.584 31.502C107.121 32.0392 107.825 32.3078 108.529 32.3078C109.232 32.3078 109.936 32.0392 110.473 31.502C111.546 30.4276 111.546 28.685 110.473 27.6106Z" fill="black"/>
<Rect height="13.7894" width="45.5451" fill="black" fillOpacity="0" transform="translate(54.3901 29.8706)"/>
<Rect height="13.7894" width="45.5451" fill="black" fillOpacity="0" transform="translate(54.3901 29.8706)"/>
<Path d="M99.1301 38.9627C87.0171 26.8398 67.3082 26.8398 55.1956 38.9627C54.1217 40.0372 54.1217 41.7797 55.1956 42.8542C56.2691 43.9286 58.0103 43.9286 59.0838 42.8542C69.0527 32.8775 85.2729 32.8775 95.2418 42.8542C95.7786 43.3914 96.482 43.66 97.1857 43.66C97.8891 43.66 98.5929 43.3914 99.1301 42.8542C100.204 41.7797 100.204 40.0372 99.1301 38.9627Z" fill="black"/>
<Rect height="9.16908" width="23.2189" fill="black" fillOpacity="0" transform="translate(65.5531 45.6633)"/>
<Rect height="9.16908" width="23.2189" fill="black" fillOpacity="0" transform="translate(65.5531 45.6633)"/>
<Path d="M87.9666 50.1349C82.0092 44.1727 72.3159 44.1727 66.3586 50.1349C65.2846 51.2094 65.2846 52.9516 66.3586 54.0264C67.4321 55.1012 69.1733 55.1008 70.2468 54.0264C74.0604 50.21 80.2651 50.21 84.0787 54.0264C84.6154 54.564 85.3192 54.8322 86.0226 54.8322C86.726 54.8322 87.4298 54.5636 87.9666 54.0264C89.0405 52.9516 89.0405 51.2097 87.9666 50.1349Z" fill="black"/>
<Rect height="31.2176" width="116.085" fill="black" fillOpacity="0" transform="translate(23.3662 83.5942)"/>
<Rect height="31.2176" width="116.085" fill="black" fillOpacity="0" transform="translate(23.3662 83.5942)"/>
<Path d="M135.296 103.727C134.107 103.072 132.933 102.355 131.808 101.594L113.622 89.2984C108.103 85.5665 101.664 83.5942 95.0036 83.5942H61.6242C52.7639 83.5942 44.4273 87.0412 38.1495 93.3C34.9228 96.5176 31.2468 99.209 27.2236 101.3C24.8442 102.536 23.3662 104.97 23.3662 107.651C23.3662 111.6 26.5756 114.812 30.5208 114.812H41.9009C43.4193 114.812 44.6504 113.58 44.6504 112.06C44.6504 110.54 43.4193 109.308 41.9009 109.308H30.5208C29.6078 109.308 28.8648 108.565 28.8648 107.651C28.8648 107.032 29.2067 106.47 29.7574 106.184C34.2775 103.835 38.407 100.812 42.0302 97.1986C47.2698 91.9743 54.2284 89.0973 61.6238 89.0973H69.0969V109.308H59.9626C58.4442 109.308 57.2131 110.54 57.2131 112.06C57.2131 113.58 58.4442 114.812 59.9626 114.812H135.352C137.612 114.812 139.451 112.971 139.451 110.709C139.451 107.813 137.859 105.137 135.296 103.727ZM74.5966 109.309V89.0977H95.004C100.564 89.0977 105.937 90.744 110.544 93.8587L128.73 106.154C129.993 107.008 131.31 107.814 132.647 108.55C132.993 108.74 133.283 109.002 133.501 109.309H74.5966Z" fill="black"/>
<Rect height="5.50348" width="13.9917" fill="black" fillOpacity="0" transform="translate(70.1666 118.995)"/>
<Rect height="5.50348" width="13.9917" fill="black" fillOpacity="0" transform="translate(70.1666 118.995)"/>
<Path d="M81.4088 118.995H72.9161C71.3978 118.995 70.1666 120.227 70.1666 121.747C70.1666 123.266 71.3978 124.498 72.9161 124.498H81.4088C82.9272 124.498 84.1583 123.266 84.1583 121.747C84.1583 120.227 82.9272 118.995 81.4088 118.995Z" fill="black"/>
<Rect height="163" width="193" fill="black" fillOpacity="0"/>
<Rect height="163" width="193" fill="black" fillOpacity="0"/>
<Path d="M190.628 116.685L189.759 115.243C186.486 109.807 181.042 105.979 174.823 104.741L167.724 103.328V67.3195H186.094C189.876 67.3195 192.953 64.2399 192.953 60.4549V6.86463C192.953 3.0792 189.876 0 186.094 0H132.548C128.765 0 125.688 3.07958 125.688 6.86463V27.1933C125.688 28.7129 126.919 29.9451 128.438 29.9451C129.957 29.9451 131.187 28.7129 131.187 27.1933V6.86463C131.187 6.11389 131.798 5.5031 132.548 5.5031H186.095C186.845 5.5031 187.455 6.11389 187.455 6.86463V60.4553C187.455 61.206 186.845 61.8168 186.095 61.8168H132.548C131.797 61.8168 131.187 61.206 131.187 60.4553V45.0823C131.187 43.5627 129.956 42.3305 128.438 42.3305C126.919 42.3305 125.688 43.5627 125.688 45.0823V60.4553C125.688 64.2407 128.765 67.3199 132.547 67.3199H153.378V100.473L149.729 99.747C144.693 98.7446 139.783 95.7027 136.528 93.5014L118.342 81.2061C111.423 76.5285 103.353 74.0559 95.0035 74.0559H61.6244C50.5176 74.0559 40.0673 78.3767 32.1992 86.2218C27.2204 91.1862 20.9532 94.5721 14.075 96.014L10.1276 96.8413C4.25918 98.0712 0 103.32 0 109.32V135.97C0 139.149 1.87533 142.038 4.77824 143.328L15.7294 148.2C16.3917 151.666 18.0601 154.975 20.7357 157.653C24.2915 161.212 28.9623 162.991 33.6335 162.991C38.3047 162.991 42.9751 161.212 46.5313 157.653C48.8183 155.364 50.3653 152.613 51.1814 149.698H142.493C143.309 152.613 144.856 155.364 147.143 157.653C150.588 161.101 155.168 163 160.041 163C164.913 163 169.494 161.101 172.939 157.653C175.226 155.364 176.773 152.613 177.589 149.698H182.805C188.426 149.698 193 145.12 193 139.494V125.222C192.999 122.214 192.179 119.262 190.628 116.685ZM158.877 67.3195H162.226V102.233L158.877 101.567V67.3195ZM42.6427 153.762C40.2362 156.17 37.0366 157.497 33.6331 157.497C30.2296 157.497 27.0301 156.17 24.6236 153.762C20.7632 149.898 19.9046 144.153 22.0434 139.45C22.0607 139.413 22.0773 139.374 22.0946 139.337C22.1599 139.197 22.2288 139.059 22.2993 138.922C22.3325 138.857 22.3657 138.792 22.4004 138.728C22.4641 138.609 22.5304 138.49 22.5983 138.373C22.645 138.292 22.6929 138.211 22.7415 138.131C22.8044 138.028 22.8681 137.924 22.9345 137.822C22.9944 137.73 23.0562 137.638 23.1188 137.547C23.1806 137.457 23.2421 137.367 23.3062 137.278C23.3797 137.176 23.4562 137.077 23.5331 136.977C23.593 136.9 23.6515 136.821 23.7133 136.745C23.8037 136.632 23.8984 136.523 23.9926 136.414C24.0465 136.351 24.0981 136.288 24.1532 136.226C24.2934 136.07 24.4378 135.918 24.5863 135.768C24.5991 135.755 24.6108 135.741 24.6236 135.729C24.6519 135.7 24.6817 135.674 24.7103 135.646C24.8362 135.522 24.9629 135.4 25.0922 135.283C25.1257 135.252 25.1611 135.224 25.1951 135.194C25.324 135.079 25.4537 134.966 25.5863 134.857C25.5988 134.847 25.612 134.838 25.6244 134.828C30.2847 131.053 37.0061 131.058 41.6607 134.843C41.666 134.847 41.6716 134.851 41.6773 134.856C41.8194 134.971 41.9585 135.093 42.0968 135.216C42.1217 135.238 42.1473 135.259 42.1718 135.281C42.3317 135.425 42.4885 135.574 42.6423 135.728C42.8081 135.894 42.968 136.065 43.1233 136.238C43.1915 136.314 43.256 136.393 43.3219 136.47C43.4026 136.564 43.4836 136.659 43.5613 136.755C43.6484 136.863 43.7324 136.974 43.8153 137.084C43.8621 137.145 43.9085 137.207 43.9537 137.269C44.0543 137.408 44.1523 137.548 44.247 137.691C44.2632 137.715 44.279 137.739 44.2948 137.764C47.5291 142.708 46.9787 149.422 42.6427 153.762ZM169.05 153.762C166.643 156.17 163.444 157.497 160.04 157.497C156.637 157.497 153.437 156.17 151.031 153.762C146.694 149.422 146.144 142.706 149.378 137.763C149.394 137.739 149.409 137.715 149.425 137.692C149.52 137.549 149.618 137.409 149.719 137.269C149.764 137.207 149.81 137.146 149.856 137.085C149.94 136.974 150.024 136.864 150.112 136.755C150.189 136.659 150.269 136.566 150.349 136.472C150.416 136.394 150.481 136.315 150.55 136.238C150.706 136.065 150.865 135.895 151.031 135.729C153.438 133.32 156.637 131.994 160.04 131.994C163.444 131.994 166.644 133.32 169.05 135.729C169.216 135.895 169.376 136.065 169.531 136.239C169.6 136.315 169.664 136.393 169.73 136.471C169.811 136.565 169.892 136.659 169.969 136.755C170.056 136.864 170.141 136.974 170.224 137.084C170.27 137.146 170.317 137.207 170.362 137.27C170.462 137.409 170.561 137.549 170.655 137.691C170.671 137.715 170.687 137.739 170.703 137.764C173.936 142.707 173.386 149.422 169.05 153.762ZM187.501 139.494H187.501C187.501 142.086 185.394 144.195 182.804 144.195H178.278C178.17 140.204 176.762 136.396 174.229 133.274C174.212 133.253 174.196 133.231 174.179 133.21C174.022 133.019 173.86 132.831 173.694 132.645C173.652 132.597 173.612 132.548 173.57 132.501C173.395 132.308 173.214 132.119 173.03 131.933C172.999 131.901 172.97 131.868 172.938 131.836C170.569 129.466 167.664 127.828 164.497 127.035C163.057 126.675 161.563 126.49 160.04 126.49C158.822 126.49 157.622 126.609 156.454 126.84C152.949 127.536 149.726 129.251 147.142 131.836C147.111 131.867 147.083 131.9 147.053 131.931C146.868 132.119 146.686 132.308 146.511 132.501C146.469 132.547 146.431 132.595 146.39 132.641C146.224 132.829 146.059 133.018 145.901 133.211C145.886 133.23 145.871 133.25 145.855 133.27C143.32 136.392 141.911 140.202 141.803 144.195H51.8704C51.7622 140.197 50.3502 136.383 47.8088 133.258C47.7971 133.243 47.7858 133.228 47.7741 133.214C47.6082 133.011 47.436 132.812 47.2607 132.615C47.2283 132.579 47.1981 132.541 47.1653 132.505C46.9599 132.279 46.7488 132.055 46.5305 131.837C45.6417 130.947 44.6827 130.169 43.6721 129.501C40.6392 127.499 37.1361 126.499 33.6331 126.499C28.9623 126.499 24.2911 128.278 20.7354 131.837C20.5322 132.04 20.3358 132.249 20.1435 132.46C20.0866 132.523 20.032 132.586 19.9758 132.649C19.8401 132.803 19.7067 132.958 19.5766 133.115C19.5189 133.185 19.4613 133.255 19.4047 133.326C19.2701 133.494 19.139 133.663 19.0108 133.835C18.9708 133.889 18.9298 133.941 18.8909 133.995C18.5464 134.467 18.2267 134.954 17.9312 135.453C17.9229 135.467 17.915 135.481 17.9067 135.495C17.7623 135.741 17.624 135.99 17.4917 136.241C17.4879 136.248 17.4841 136.256 17.48 136.263C16.5214 138.089 15.8768 140.063 15.5813 142.111L7.01205 138.3C6.09305 137.891 5.49935 136.976 5.49935 135.97V109.32C5.49935 105.91 7.92051 102.927 11.2562 102.227L15.2036 101.4C23.1271 99.7387 30.3465 95.8382 36.0814 90.12C42.9118 83.3093 51.9835 79.5586 61.6256 79.5586H95.0046C102.253 79.5586 109.259 81.7052 115.265 85.7657L133.451 98.061C137.1 100.529 142.647 103.947 148.657 105.144L173.751 110.138C178.456 111.075 182.574 113.97 185.05 118.083L185.919 119.525C186.954 121.244 187.501 123.214 187.501 125.222V139.494Z" fill="black"/>
<Rect height="16.7081" width="16.6909" fill="black" fillOpacity="0" transform="translate(25.286 136.391)"/>
<Rect height="16.7081" width="16.6909" fill="black" fillOpacity="0" transform="translate(25.286 136.391)"/>
<Path d="M39.5359 138.838C37.9587 137.26 35.8629 136.391 33.6332 136.391C31.4036 136.391 29.3073 137.26 27.7309 138.838C26.1545 140.416 25.286 142.514 25.286 144.745C25.286 146.977 26.1545 149.075 27.7309 150.652C29.3073 152.23 31.4036 153.099 33.6336 153.099C35.8633 153.099 37.9595 152.23 39.5359 150.652C42.7905 147.395 42.7905 142.095 39.5359 138.838ZM35.6473 146.761C35.1094 147.299 34.3939 147.596 33.6332 147.596C32.8722 147.596 32.1571 147.299 31.6192 146.76C31.0813 146.222 30.7846 145.506 30.7846 144.745C30.7846 143.983 31.0809 143.267 31.6192 142.729C32.1571 142.191 32.8722 141.894 33.6332 141.894C34.3939 141.894 35.1094 142.19 35.6473 142.729C36.7578 143.841 36.7578 145.649 35.6473 146.761Z" fill="black"/>
<Rect height="16.7081" width="16.6906" fill="black" fillOpacity="0" transform="translate(151.697 136.391)"/>
<Rect height="16.7081" width="16.6906" fill="black" fillOpacity="0" transform="translate(151.697 136.391)"/>
<Path d="M165.943 138.838C164.366 137.26 162.27 136.391 160.04 136.391C157.81 136.391 155.714 137.26 154.137 138.838C150.883 142.095 150.883 147.395 154.137 150.652C155.714 152.23 157.81 153.099 160.04 153.099C162.27 153.099 164.366 152.23 165.942 150.653C167.519 149.075 168.387 146.977 168.387 144.745C168.387 142.514 167.519 140.416 165.943 138.838ZM162.054 146.761C161.516 147.3 160.801 147.596 160.04 147.596C159.279 147.596 158.564 147.3 158.026 146.761C156.915 145.65 156.915 143.841 158.026 142.73C158.564 142.191 159.279 141.895 160.04 141.895C160.801 141.895 161.516 142.191 162.054 142.73C162.592 143.268 162.889 143.984 162.889 144.745C162.889 145.506 162.593 146.222 162.054 146.761Z" fill="black"/>
</Svg>;
const SvgAssets = function(props){
const {icon, width = 80, height = 80} = props;
const lib = {
'car-park-sensor': CarParkSensor
};
const Element = lib[icon];
if(!Element){
throw new Error(`SvgAssets doesn't have any icon with name ${icon}. Please insert a valid icon`);
}
return Element(width, height);
};
export {SvgAssets}
Then you can use it in this way
<SvgAssets icon="car-park-sensor" width="190" height="190" style={{alignSelf:'center'}} />
github.com/react-native-community/react-native-svg - this is an active repo for SVG
It is one of the best ways to show tiny images in your react-native projects.
first import svgxml from react-native-svg:
import { SvgXml } from "react-native-svg";*
then store the SVG code which is extracted from the image inside render and return section inside backtick character:
const newImage= <svg ... .... ... ... /svg>
finally use it inside your code block:
<SvgXml
xml={newImage}
height={22}
width={18}
/>