search

aykutkardas / react-icomoon

It makes it very simple to use SVG icons in your React and React-Native projects.
https://svgps.app
MIT License
216 stars 22 forks source link

Rendering issue within a <Text> wrapper #15

Closed ericpolkadoc closed 3 years ago

ericpolkadoc commented 3 years ago

Hi,

I have the following code:

 <Text>
    <Icon icon={IconFonts.SOMEICON} style={quote} size={10} marginLeft={10}/>
    <Text style={myStyle}>{someText}</Text>
    <Icon icon={IconFonts.ANOTHERICON} style={quote} size={10} marginRight={10}/>
</Text>

The icons are styled quotation marks, that are expected to be in the sentence, around the inner text.

However it doesn't render correctly. If I comment out the icons, the inner text shows. If I comment out the inner Text, the icons show.

If I comment out the outer wrapper Text, both the icons and text show, but they are inline, as views, and not inline as expected in a sentence.

It seems to me that somehow the Icons are not being treated as Text. Is there are way to make this work?

Thanks!

aykutkardas commented 3 years ago

Icons are not text. Maybe wrapping with 'View' can solve your problem.

<View>
    <Icon icon={IconFonts.SOMEICON} style={quote} size={10} marginLeft={10}/>
    <Text style={myStyle}>{someText}</Text>
    <Icon icon={IconFonts.ANOTHERICON} style={quote} size={10} marginRight={10}/>
</View>
ericpolkadoc commented 3 years ago

ok thanks, great to know. As I mentioned, if I wrap them in a View, they will align as views, inline. My goal was to used the icons as characters in a sentence.