Giters

gilbarbara / react-inlinesvg

An SVG loader component for ReactJS

Home Page:https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Incorrect shape rendering

shafqatjamil opened this issue · comments

commented

I have a SVG which is correctly rendering in https://www.rapidtables.com/web/tools/svg-viewer-editor.html but using this package in my react app its just display a tick in same color. Shape should be a plus sign within the circle

React Version: 17.0.2
inlinsvg version: 2.3.0

Following is the svg code

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M8.5,7.5 L11,7.5 C11.2761424,7.5 11.5,7.72385763 11.5,8 C11.5,8.27614237 11.2761424,8.5 11,8.5 L8.5,8.5 L8.5,11 C8.5,11.2761424 8.27614237,11.5 8,11.5 C7.72385763,11.5 7.5,11.2761424 7.5,11 L7.5,8.5 L5,8.5 C4.72385763,8.5 4.5,8.27614237 4.5,8 C4.5,7.72385763 4.72385763,7.5 5,7.5 L7.5,7.5 L7.5,5 C7.5,4.72385763 7.72385763,4.5 8,4.5 C8.27614237,4.5 8.5,4.72385763 8.5,5 L8.5,7.5 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z" id="path-1"></path>
    </defs>
    <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Add-a-New-Protocol---Screening" transform="translate(-657.000000, -940.000000)">
            <g id="Group-8" transform="translate(657.000000, 936.000000)">
                <g id="1.-Elements/Icons/16/Add" transform="translate(0.000000, 4.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <use id="Oval" fill="#753BBD" fill-rule="nonzero" xlink:href="#path-1"></use>
                </g>
            </g>
        </g>
    </g>
</svg>
commented

Please provide a https://codesandbox.io/ demo or similar.

commented

I tried to reproduce but its working fine in sandbox. FYI I upgraded react version from 16 to 17 if it helps

commented

So, if it is working with a simple setup, it might be a problem with your app?
Anyway, without a reproduction, there's no way to know what is happening...