0

I'm using FontAwesome's react-fontawesome like so:

<FontAwesomeIcon icon={faCaretUp} color="gray" size="lg" />

but the resulting icon has way too much space around it.

enter image description here

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" class="svg-inline--fa fa-caret-up fa-w-10 fa-lg " role="img" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 320 512" color="gray" style="margin: 0px auto;">
    <path fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543- 
     14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 
     128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path>
</svg>

Been trying to fix it for a while but nothing works, am I doing something wrong?

K41F4r
  • 1,443
  • 1
  • 16
  • 36
  • So what space are you trying to get rid of? The grey blue space above and below it? – Sam Mullinix Jul 09 '19 at 15:37
  • Did you try changing `size="lg"` to `xs` or `sm`? I think it's because that parameter you are getting bigger SVG. – Abhinav Kinagi Jul 09 '19 at 15:40
  • 2
    The viewBox is likely too big, try reducing its height. You may need to adjust the viewBox y value at the same time so the contents stay visible. – Robert Longson Jul 09 '19 at 15:41
  • 1
    That space looks normal, don't forget this is a font based icon, it's meant to have space above and below the icon. That's it's design.. IOW: The design of that icon is not meant to fill the whole space.. – Keith Jul 09 '19 at 16:13
  • @RobertLongson Changing the viewbox worked, `viewBox="0 160 320 190"` thanks. As @Keith said, seeing as the they are font based this it would make sense, feels really hacky though – K41F4r Jul 09 '19 at 16:46

0 Answers0