Kevin Powell - Community•2mo ago

react-icon disappeared

I am facing this weird bug in my application. Some of my icons disappear, while inspecting with dev tools the SVGs are there but it doesn't appear in the UI. While trying to figure this out I got the solution but I want to know what coausing this what happens is if I set the size of icon 18 it appears anything below 18 it disappears again <ToolTipIcon size={18} /> this is visible but <ToolTipIcon /> this is not, but its SVG is there in the DOM

44 Replies

EIO•2mo ago

To know for sure, it'd be nice to have a snippet where it is being used

Israr•2mo ago

Actually it's not about where I am using it it's happening through out application

Jochem•2mo ago

you're sharing an invocation of a component, without any info about what that component is for all we know, there's a if size < 18 then display: none; in there somewhere this question is unanswerable without more information, like the code that's being run

Israr•2mo ago

I am working with React tailwind react-icon and this is happening throughout the application The icon that was working fine because is now not visible So idk what exactly to share am sorry about that Please tell me what part of code should I share

MarkBoots•2mo ago

you could start with showing the svg when it is not visable (inspect element). if we can see what is missing, why might have an idea

Israr•2mo ago

for eg. there should be an icon beside Verified

Israr•2mo ago

__ another example

Israr•2mo ago

icon beside revenue

Israr•2mo ago

it is working if i decrease the height of it there's no issue but if i decrease the width of it less then 18 it'll disappear

Israr•2mo ago

MarkBoots•2mo ago

when i look at the viewbox, it is supposed to be square (0 0 24 24). so instead of only setting the hight, you might also try to set the width

Israr•2mo ago

i am using react-icon package so when we set size to it it sets the both height and width like this

<div className="back-btn self-start">
          <Link
            to={"./.."}
            className="flex items-center gap-4 max-w-fit hover:cursor-pointer"
          >
            <CloseIcon
              size={10}
              color="#3C4852"
              className="border p-2 rounded-lg w-8 h-8"
            />
            <span className="max-sm:hidden"> Close</span>
          </Link>
        </div>

<div className="back-btn self-start">
          <Link
            to={"./.."}
            className="flex items-center gap-4 max-w-fit hover:cursor-pointer"
          >
            <CloseIcon
              size={10}
              color="#3C4852"
              className="border p-2 rounded-lg w-8 h-8"
            />
            <span className="max-sm:hidden"> Close</span>
          </Link>
        </div>

this is one of the examples of how am using this

MarkBoots•2mo ago

can you pase the whole svg code of an icon please.

Israr•2mo ago

from dev tools?

MarkBoots•2mo ago

yep

Israr•2mo ago

<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#3C4852" class="border p-2 rounded-lg w-8 h-8" height="10" width="10" xmlns="http://www.w3.org/2000/svg" style="color: rgb(60, 72, 82);"><path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>

<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#3C4852" class="border p-2 rounded-lg w-8 h-8" height="10" width="10" xmlns="http://www.w3.org/2000/svg" style="color: rgb(60, 72, 82);"><path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>

Israr•2mo ago

using it here

MarkBoots•2mo ago

it might be the tailwind classes border, padding. (those are included into the size, so there wont be space left)

Israr•2mo ago

it appears when i add overflow: visible;

MarkBoots•2mo ago

what happens if you remove the p-2

Israr•2mo ago

but my doubt is it was working fine when i coded it for the first time and i dont know by when or i did change something all this icon disappeard and now the y do appear if i change some property like this overflow or if i cange the size

Israr•2mo ago

MarkBoots•2mo ago

well, if your icon size is 18px but has the padding (p-2 = 8px), there will only be 2px left to fit the svg

Israr•2mo ago

what should i do in this case should i give height ad width to this insted of padding for breathing space

MarkBoots•2mo ago

or set the size on the svg and put it in a separate element with the padding and border

Israr•2mo ago

<span className="w-8 h-8 border rounded-lg flex items-center justify-center">
              <CloseIcon color="#3C4852" className="  w-6 h-6" />
            </span>

<span className="w-8 h-8 border rounded-lg flex items-center justify-center">
              <CloseIcon color="#3C4852" className="  w-6 h-6" />
            </span>

this works

MarkBoots•2mo ago

yea. or remove w-8 h-8 from the span and use p-2 instead (then you also wont need the flex center)

Israr•2mo ago

this worked thankss!

MarkBoots•2mo ago

no problem. glad it works.

Israr•2mo ago

I'll have to do changes to all these icons that disappeared and am still not clear why it was working before and not now :/

MarkBoots•2mo ago

when you set a size to an element, and you include padding, that padding takes space of that size. so imagine svg is 16x16px padding is 8px (2x for all directions) then 16px - 16px = 0px left for the svg itself

Israr•2mo ago

makes sense

<div className="text-[#6D7486]  text-[10px] flex items-center gap-1">
              <h5>
                Potential revenue
              </h5>
              <ToolTipIcon />
              </div>

<div className="text-[#6D7486]  text-[10px] flex items-center gap-1">
              <h5>
                Potential revenue
              </h5>
              <ToolTipIcon />
              </div>

what about here? @MarkBoots

<div class="text-[#6D7486]  text-[10px] flex items-center gap-1"><h5 class="">Potential revenue</h5><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M11 10.9794C11 10.4271 11.4477 9.97937 12 9.97937C12.5523 9.97937 13 10.4271 13 10.9794V16.9794C13 17.5317 12.5523 17.9794 12 17.9794C11.4477 17.9794 11 17.5317 11 16.9794V10.9794Z" fill="currentColor"></path><path d="M12 6.05115C11.4477 6.05115 11 6.49886 11 7.05115C11 7.60343 11.4477 8.05115 12 8.05115C12.5523 8.05115 13 7.60343 13 7.05115C13 6.49886 12.5523 6.05115 12 6.05115Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12Z" fill="currentColor"></path></svg></div>

<div class="text-[#6D7486]  text-[10px] flex items-center gap-1"><h5 class="">Potential revenue</h5><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M11 10.9794C11 10.4271 11.4477 9.97937 12 9.97937C12.5523 9.97937 13 10.4271 13 10.9794V16.9794C13 17.5317 12.5523 17.9794 12 17.9794C11.4477 17.9794 11 17.5317 11 16.9794V10.9794Z" fill="currentColor"></path><path d="M12 6.05115C11.4477 6.05115 11 6.49886 11 7.05115C11 7.60343 11.4477 8.05115 12 8.05115C12.5523 8.05115 13 7.60343 13 7.05115C13 6.49886 12.5523 6.05115 12 6.05115Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12Z" fill="currentColor"></path></svg></div>

MarkBoots•2mo ago

for me it works

Israr•2mo ago

this works for me if am settinf the font size = 18px to svg --- if i do flex-grow on svg (without adding the size) this happens

Israr•2mo ago

--- or adding this overflow: visible; works 🥲

MarkBoots•2mo ago

Hard to tell, but you need to try and stay away from styling an svg itself. it can effect everything inside the viewbox. put a span around it.

Israr•2mo ago

got it i'll do that @MarkBoots i got to know another thing please check if this can help you understand this

Israr•2mo ago

when i am inspecting its the same as is the icons are not visible but as soon as i hit thhe responsive button on dev tool all the icons are visible no matter the screen size we select in responsive

Israr•2mo ago

MarkBoots•2mo ago

uhm, not sure. that could be a quirck of the responsive mode of the browser (it only tries to emulate it, it's not exact what a device would do). also maybe the zoom level makes it possible to show up... can not tell, don't know

Israr•2mo ago

so after digging alot ALOT! here's the problem ifi comment this then all the icons work perfectly

Gaming

Programming

react-icon disappeared