The question may be trivial but I am a bit confused. I imported to my React app some SVG files and I wonder what is the best place to keep them to have a clean file structure. I have two folders that I assume could be the best for them. The first is ./src/Assets/Icons folder and another one is the ./src/Components/Icons folder.
I am using SVG as a component like here so I am not sure if it will be better to have them in Assets or in Components. What are your best practices and how do you approach that?
return (
<svg
width="35"
height="36"
viewBox="0 0 35 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.8385 0.414062H4.16151C2.05801 0.414062 0.350006 2.26846 0.350006 4.55226V31.4487C0.350006 33.7325 2.05801 35.5869 4.16151 35.5869H30.8385C32.942 35.5869 34.65 33.7325 34.65 31.4487V4.55226C34.65 2.26846 32.942 0.414062 30.8385 0.414062ZM7.97301 2.48506C8.44901 2.48506 26.523 2.48506 27.027 2.48506V15.9333C27.027 16.5033 26.5965 16.9669 26.075 16.9669H8.92501C8.40001 16.9669 7.97301 16.5033 7.97301 15.9333V2.48506ZM32.746 31.4487C32.746 32.5925 31.8955 33.5159 30.842 33.5159H4.16151C3.10801 33.5159 2.25751 32.5925 2.25751 31.4487V4.55226C2.25751 3.40846 3.10801 2.48506 4.16151 2.48506H6.06551V16.9669C6.06551 18.1107 6.91601 19.0341 7.96951 19.0341H27.0235C28.077 19.0341 28.9275 18.1069 28.9275 16.9669V2.48506H30.8315C31.885 2.48506 32.7355 3.41226 32.7355 4.55226V31.4487H32.746Z"
fill="#11100E"
/>
<path
d="M22.2635 12.8284C22.7885 12.8284 23.2155 12.3648 23.2155 11.7948V7.65665C23.2155 7.08665 22.785 6.62305 22.2635 6.62305C21.742 6.62305 21.3115 7.08665 21.3115 7.65665V11.7948C21.3115 12.3648 21.7385 12.8284 22.2635 12.8284Z"
fill="#11100E"
/>
</svg>
);
};
export default SaveIcon;
Related
I would like to extract the underlying data, probably a WMS or WMTS service, from this map of the French gas transmission network (operator GRTgaz).
Sadly it is obfuscated as SVG tiles. Any chance to get to the data?
<svg overflow="hidden" width="1917" height="1048" id="map_gc" style="overflow: visible; position: absolute;"><g id="Carte_AGOL_generalise_7504_layer" data-geometry-type="point" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)"><g></g><image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="1093" y="278" width="16" height="16" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAZRJREFUOI2lk71LW1EYh58X7iWVgJRKq9FCu7SDIFROESQZVVDvJYNupav5LzrYtdClDmbrIF0qIjft4OrXYO4fEEoHm3rppItGaY73dUhuquRqA/628/F7zvt1HO4pJ20zjmMfMCJiAFQ1EpGyiIR3AlTVcPl3mcP9OY52oPELMoNIbhKe55dUtWKtLbmuG3UBVNXQOPnO7rsnnHy6+cwfoFaEwornPBypAsPdEVw2l9l7321O1NiEbQvTX3KqGoiI3wHEcexTP5jj+GO6OdH5N/ixBWMLnqoaEQmTCAzR/t3mRPWvMLbQ8kALICKGxu/eAGcboAqtFMr/apB53BvgwQyIdJYOtPs8NAFHPQCeLtL2hB2AiJR5NrlE7Q2crt1udl7By3nanuA6IFTVCoUPHtsXcLaeYjaQX4PsAEAlmcpODay1Jad/qMrU5xw/30I9gNMd6BuHYQ9ezEL2EUBorS3dqAGA67pRs9l87WSyq4wWPUaLaUncPsoJBPBV1dDqs58UTESC/36mRO2LIVBOO7+uK5U0lCx1rFB+AAAAAElFTkSuQmCC" opacity="1" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)"></image> ....
I am developing a webpart with for SharePoint. I use the SharePoint Framework, TypeScript and ReactJS.
I need to use svg image.
But when I paste my svg image code into my webpart, I have error and I can't build.
For the test, I use the base webpart generate by SharePoint when we create a new project.
When I build, I have this kind of error :
Error - typescript - src\webparts\graph\components\Graph.tsx(28,8): error TS1003: Identifier expected.
I created my svg with inkscape and I edited it to work with ReactJS.
Could you help me ?
The svg :
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 560,315.21933 a 265.71429,234.28572 0 1 1 -531.428589,0 265.71429,234.28572 0 1 1 531.428589,0 z"
id="path2985"
style={{fill:#ffff00;fill-opacity:1;stroke:none}} />
</g>
</svg>
I finally find a solution.
I use svg to react cli (https://www.npmjs.com/package/svg-to-react-cli) to transform my svg into react component. Then I remove the tag defs and metadata. To finish, I paste my svg code in my react component. And it works fine.
I have some code to create a star rating. I have not used SVG before and I can't figure out how to get it to do the following:
Rating is out of 5
Display ratings with decimal place ie: 4.5, 3.2, 1.1 as well as whole stars
Rated stars need to be yellow, stars remaining need to be grey
How and what do I change on the example to move the star rating left and right to get it do display the stars catering for decimals?
Fiddle example:
http://jsfiddle.net/apbuc773/10/
Code:
<svg height="210" width="500" fill="url(#g)">
<polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
203.042, 152.639,
176.756, 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000" style="stroke: red;"/>
<linearGradient y2="0.9733" x2="1" id="g" x1="0.0167" y1="0.9833">
<stop stop-color="#F00" offset="0.4733"/>
<stop stop-color="rgb(255, 255, 255)" offset="0.5033"/>
</linearGradient>
</svg>
The code attached - is all this needed? As there will be 5 stars in total, can it be simplified.
Thanks
Here is Fiddle with dots:
http://jsfiddle.net/cnLHE/296/
You can place a rectangle underneath masked elements. In this Fiddle, the rectangle is width=90, which is 90% (at very bottom).
<rect x="0" y="0" width="90" height="20" style="fill:#2498c7; mask: url(#mask5)"/>
Change the 90 to 55, for example, and the underlying fill will shrink width.
Warning: I scrapped this method, because it did not work well with 20+ instances in page. For example, when loading a grid of rated products, the ratings graphic would sometimes disappear in Chrome. JS methods were more reliable.
You can adjust the <linearGradient> with some simple JS. Example below.
function setFraction(fraction)
{
document.getElementById("stop1").setAttribute("offset", fraction);
document.getElementById("stop2").setAttribute("offset", fraction);
}
setFraction(0.4);
<svg height="210" width="500">
<polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
203.042, 152.639,
176.756, 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000" style="stroke:red; fill:url(#g)"/>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
<stop id="stop1" stop-color="#F00" offset="0.5"/>
<stop id="stop2" stop-color="#fff" offset="0.5"/>
</linearGradient>
</svg>
If you wanted to avoid JS, then you could create 11 different versions of the star (unfilled, 0.1, 0.2 ... 0.9, filled) and just include the correct one.
Change the offset fields from 0 (unfilled) to 1 (filled) to move the rating.
Not sure why you're specifying red in two different ways or why you've slightly different offset values.
I am having the weirdest problem with an svg filter and I'm not sure how to debug the problem or what the fix might be.
I have a drop shadow filter that I'm applying to a circle. Here is the SVG markup that I'm using (only showing one arc of the donut chart for brevity):
<svg height="240" width="240">
<defs>
<filter width="130%" height="130%" id="dropshadow">
<feGaussianBlur stdDeviation="1" result="blur-out" in="SourceAlpha">
</feGaussianBlur>
<feOffset result="shadow-out" dy="2" dx="1" in="blur-out">
</feOffset>
<feColorMatrix result="color-out" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0" type="matrix" in="shadow-out">
</feColorMatrix>
<feBlend mode="normal" in2="color-out" in="SourceGraphic">
</feBlend>
</filter>
</defs>
<g transform="translate(120,120)" class="donut">
<g class="arcs">
<g class="arc">
<path d="M-63.63961030678927,-63.63961030678928A90,90 0 1,1,-29.811356451234897,84.91927358696267L-27.492695393916627,78.31444119686557A83,83 0 1,0 -58.68986283848344,-58.68986283848345Z" class="a"></path>
<circle transform="translate(91.16631091370033,-20.75942567573879)" filter="url(#dropshadow)" r="17" class="a"></circle>
<text transform="translate(91.16631091370033,-20.75942567573879)" text-anchor="middle" dy=".35em" class="chart-label">30</text>
</g>
</g>
</g>
</svg>
This is how it renders in Internet Explorer, Chrome, and Firefox:
However, when I add the chart to my application which uses angularjs/bootstrap and open it up with Firefox it renders like this:
The drop shadow is no longer working and neither is the fill color for the circle. Even if I select the element and apply a fill directly, it still doesn't work. However, if I delete the filter from the circle (fill="url(#dropshadow)"), the fill color starts working again. Note that the chart renders correctly in all other browsers.
What could be causing the fill to suddenly stop working only in Firefox and only when added to my angularjs/bootstrap project?
When you re-add the filter using inline css (style="filter:...").
Does it work again then?
I have a resource defined in my Xaml file as follows:
<Path x:Key="myPath"
Data="M14.773241,18.080208 C12.373256,18.080208 10.239936,19.30687 10.239936,27.573483
L10.239936,36.106766 C10.239936,45.440037 12.586588,46.506699 14.986573,46.506699
C18.613216,46.506699 19.359879,42.400059 19.359879,35.3601 L19.359879,27.733482
C19.359879,20.05353 17.386559,18.080208 14.773241,18.080208 z M14.879907,11.786915
C17.973221,11.786915 22.293194,13.013573 24.906511,17.920212 C26.773167,21.386856
27.519829,27.093487 27.519829,32.213455 C27.519829,34.506775 27.306496,41.706726
24.906511,46.453365 C23.626518,49.013351 20.906536,52.799992 15.199905,52.799992
C2.1333201,52.799992 2.1333201,37.600086 2.1333201,32.160122 C2.1333201,28.05348
2.1333201,22.666847 4.4266391,18.453541 C5.8666301,15.840225 8.639946,11.786915
14.879907,11.786915 z"
/>
I want to able to add multiple "instances" of this path (and several others) to a StackPanel. Of course, I can't simply add "myPath" to the panel since it's already a child of another container.
However, I can't seem to be able to clone the path either. I've tried:
Path clone = new Path()
{
Data = source.Data
};
But no luck...exception about value being out of expected range.
Finally, I tried digging into source.Data (a PathGeometry), but it contains no PathFigures...I have no idea why, since the Path does render if I copy it from the resource section to a panel directly.
What gives?
Thanks,
Sergio
Put the path data in a string resource:
<Page.Resources>
<system:String x:Key="PathData">
M14.773241,18.080208 C12.373256,18.080208 10.239936,19.30687 10.239936,27.573483
L10.239936,36.106766 C10.239936,45.440037 12.586588,46.506699 14.986573,46.506699
C18.613216,46.506699 19.359879,42.400059 19.359879,35.3601 L19.359879,27.733482
C19.359879,20.05353 17.386559,18.080208 14.773241,18.080208 z M14.879907,11.786915
C17.973221,11.786915 22.293194,13.013573 24.906511,17.920212 C26.773167,21.386856
27.519829,27.093487 27.519829,32.213455 C27.519829,34.506775 27.306496,41.706726
24.906511,46.453365 C23.626518,49.013351 20.906536,52.799992 15.199905,52.799992
C2.1333201,52.799992 2.1333201,37.600086 2.1333201,32.160122 C2.1333201,28.05348
2.1333201,22.666847 4.4266391,18.453541 C5.8666301,15.840225 8.639946,11.786915
14.879907,11.786915 z
</system:String>
</Page.Resources>
And to use it:
<Path x:Name="Path1" Data="{StaticResource PathData}" Fill="Blue" ... />
<Path x:Name="Path2" Data="{StaticResource PathData}" Fill="Red" ... />
You'll need this in your XAML declaration:
xmlns:system="clr-namespace:System;assembly=mscorlib"
If you want to create paths programmatically using a common path string, Silverlight is missing a bit of key functionality that WPF has -- so you have to kludge it:
string pathXaml =
#"<Path xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
Data=""path_data_goes_here"" />";
Path path = (Path)System.Windows.Markup.XamlReader.Load(pathXaml);