Importing SVG leads to multiple CSS entries

[alxm...@gmail.com]

Hi,

I am trying to add a new icon based on an existing icomoon icon - the floppy-disk icon (e962). So I export the svg and edit it using Inkscape as required which is effectively adding some new rectangles.

However when I import it back into icomoon I get a number of entries rather than the one I would expect. It does not seem to be an Inkscape issue as the same occurs if I edit the svg directly. See the css here:

.icomoon-floppy-disk2 .path1:before {
content: "\e601";
color: rgb(0, 0, 0);
}
.icomoon-floppy-disk2 .path2:before {
content: "\e602";
margin-left: -1em;
color: rgb(249, 249, 249);
}
.icomoon-floppy-disk2 .path3:before {
content: "\e603";
margin-left: -1em;
color: rgb(249, 249, 249);
}
.icomoon-floppy-disk2 .path4:before {
content: "\e604";
margin-left: -1em;
color: rgb(249, 249, 249);
}


Anyone got any idea on what I am doing wrong ?
(full svg output is below also)

thanks,
alx





<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by IcoMoon.io -->

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="512"
height="512"
viewBox="0 0 512 512"
id="svg3336"
inkscape:version="0.91 r13725"
sodipodi:docname="floppy-disk (1).svg"
inkscape:export-filename="C:\tmp\floppy-disk (1).png"
inkscape:export-xdpi="90.005882"
inkscape:export-ydpi="90.005882">
<metadata
id="metadata3469">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3467" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="963"
id="namedview3465"
showgrid="false"
inkscape:zoom="1.0634223"
inkscape:cx="160.6391"
inkscape:cy="199.91055"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg3336" />
<g
id="icomoon-ignore"
transform="matrix(0.94675325,0,0,0.75194805,27.262338,0)">
<line
x1="16"
y1="0"
x2="16"
y2="512"
id="line3339"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="32"
y1="0"
x2="32"
y2="512"
id="line3341"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="48"
y1="0"
x2="48"
y2="512"
id="line3343"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="64"
y1="0"
x2="64"
y2="512"
id="line3345"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="80"
y1="0"
x2="80"
y2="512"
id="line3347"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="96"
y1="0"
x2="96"
y2="512"
id="line3349"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="112"
y1="0"
x2="112"
y2="512"
id="line3351"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="128"
y1="0"
x2="128"
y2="512"
id="line3353"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="144"
y1="0"
x2="144"
y2="512"
id="line3355"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="160"
y1="0"
x2="160"
y2="512"
id="line3357"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="176"
y1="0"
x2="176"
y2="512"
id="line3359"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="192"
y1="0"
x2="192"
y2="512"
id="line3361"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="208"
y1="0"
x2="208"
y2="512"
id="line3363"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="224"
y1="0"
x2="224"
y2="512"
id="line3365"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="240"
y1="0"
x2="240"
y2="512"
id="line3367"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="256"
y1="0"
x2="256"
y2="512"
id="line3369"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="272"
y1="0"
x2="272"
y2="512"
id="line3371"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="288"
y1="0"
x2="288"
y2="512"
id="line3373"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="304"
y1="0"
x2="304"
y2="512"
id="line3375"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="320"
y1="0"
x2="320"
y2="512"
id="line3377"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="336"
y1="0"
x2="336"
y2="512"
id="line3379"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="352"
y1="0"
x2="352"
y2="512"
id="line3381"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="368"
y1="0"
x2="368"
y2="512"
id="line3383"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="384"
y1="0"
x2="384"
y2="512"
id="line3385"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="400"
y1="0"
x2="400"
y2="512"
id="line3387"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="416"
y1="0"
x2="416"
y2="512"
id="line3389"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="432"
y1="0"
x2="432"
y2="512"
id="line3391"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="448"
y1="0"
x2="448"
y2="512"
id="line3393"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="464"
y1="0"
x2="464"
y2="512"
id="line3395"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="480"
y1="0"
x2="480"
y2="512"
id="line3397"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="496"
y1="0"
x2="496"
y2="512"
id="line3399"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="16"
x2="512"
y2="16"
id="line3401"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="32"
x2="512"
y2="32"
id="line3403"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="48"
x2="512"
y2="48"
id="line3405"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="64"
x2="512"
y2="64"
id="line3407"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="80"
x2="512"
y2="80"
id="line3409"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="96"
x2="512"
y2="96"
id="line3411"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="112"
x2="512"
y2="112"
id="line3413"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="128"
x2="512"
y2="128"
id="line3415"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="144"
x2="512"
y2="144"
id="line3417"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="160"
x2="512"
y2="160"
id="line3419"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="176"
x2="512"
y2="176"
id="line3421"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="192"
x2="512"
y2="192"
id="line3423"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="208"
x2="512"
y2="208"
id="line3425"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="224"
x2="512"
y2="224"
id="line3427"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="240"
x2="512"
y2="240"
id="line3429"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="256"
x2="512"
y2="256"
id="line3431"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="272"
x2="512"
y2="272"
id="line3433"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="288"
x2="512"
y2="288"
id="line3435"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="304"
x2="512"
y2="304"
id="line3437"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="320"
x2="512"
y2="320"
id="line3439"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="336"
x2="512"
y2="336"
id="line3441"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="352"
x2="512"
y2="352"
id="line3443"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="368"
x2="512"
y2="368"
id="line3445"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="384"
x2="512"
y2="384"
id="line3447"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="400"
x2="512"
y2="400"
id="line3449"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="416"
x2="512"
y2="416"
id="line3451"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="432"
x2="512"
y2="432"
id="line3453"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="448"
x2="512"
y2="448"
id="line3455"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="464"
x2="512"
y2="464"
id="line3457"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="480"
x2="512"
y2="480"
id="line3459"
style="opacity:1;stroke:#449fdb;stroke-width:1" />
<line
x1="0"
y1="496"
x2="512"
y2="496"
id="line3461"
style="opacity:0.3;stroke:#449fdb;stroke-width:1" />
</g>
<path
d="M 448,0 0,0 l 0,512 512,0 0,-448 z m -192,64 64,0 0,128 -64,0 z M 449.32987,386.82597 65.994805,384.16623 64,64 l 32,0 0,160 288,0 0,-160 37.489,0 L 448,90.509 Z"
id="path3463"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccc" />
<rect
style="fill:#f9f9f9;fill-opacity:1;stroke:none"
id="rect5306"
width="64.884857"
height="61.123413"
x="305.61707"
y="399.15677" />
<rect
style="fill:#f9f9f9;fill-opacity:1;stroke:none"
id="rect5306-7"
width="64.884857"
height="61.123413"
x="377.5546"
y="399.62695" />
<rect
style="fill:#f9f9f9;fill-opacity:1;stroke:none"
id="rect5306-8"
width="64.884857"
height="61.123413"
x="448.08163"
y="399.62695" />
</svg>

[Keyamoon]

Hi,

That is because your icon is multicolor. You have paths with different colors and therefore you get one CSS entry per path; because webfonts can only have one color. If you are using your font on the web, you can use the code generated by IcoMoon. But if you really need to have one entry, you would have to change all the colors in your icon to a single color.

[alxm...@gmail.com]

Hi,

I resized the icon as it was and then added black where I needed and it worked perfectly.

Thanks very much for the help !!!

alx