search

expo / vector-icons

https://icons.expo.fyi
MIT License
671 stars 116 forks source link

Specify size and color in the style of NativeWind #277

Closed bdm-k closed 9 months ago

bdm-k commented 1 year ago

Hello,

I'd like to request a new feature.
It would be very helpful if we could specify the size and color of icons in the style of NativeWind. NativeWind is a React Native library that enables you to style components in the same manner as Tailwind CSS.

Suppose we have the following icon:

<SimpleLineIcons name="picture" size={24} color="#1f2937" />

Under the proposed NativeWind styling, it would be transformed to:

<SimpleLineIcons name="picture" className="text-2xl leading-6 text-gray-800" />

As I'm not an expert in NativeWind or this library, I'm not sure if this request falls within the scope of this project. If it doesn't, please feel free to inform me and close this issue.

Thank you for considering this enhancement!

tyrauber commented 11 months ago

This is actually possible in Nativewind V4 using cssInterop.

import { cssInterop } from 'nativewind';
import FontAwesome from '@expo/vector-icons/FontAwesome';

cssInterop(FontAwesome, {
  className: {
    target: "style",
    nativeStyleToProp: { height: true, width: true, size: true},
  },
});

...

<FontAwesome name="info-circle" className="color-black dark:color-white text-4xl" />

See this issue here for additional info: https://github.com/marklawlor/nativewind/issues/614