andrew-levy / sweet-sfsymbols

SF Symbols brought to you by Expo's Module API
65 stars 2 forks source link

Question: is it possible to use custom SF symbols with this library? #8

Closed TowhidKashem closed 6 months ago

TowhidKashem commented 6 months ago

Thanks for making the lib, it's awesome! The only other sf symbols lib that's out there for RN doesn't support animations but this one does which is great.

I was just wondering if it's possible to also use custom symbols with this lib? This Apple developer video shows how to make custom symbols via the SF symbols app and export them for use in Xcode:

https://developer.apple.com/wwdc23/10257

But when using RN can these exported symbols be used in the app via this lib?

andrew-levy commented 6 months ago

I haven't tried it but I think it should be possible. You'll need to create the custom symbol, and just use that new name to refer to it. Would be great if you are able to get it to work. Let me know! @TowhidKashem

TowhidKashem commented 6 months ago

I don't have the need to now but do see myself needing to in the future, I'm on a managed expo project with custom dev-client so never had to open my project in xcode. Will need to figure that out and how to imort/export the icons in xcode first before trying, but good to know it should be possible on the react-native/icon package's end, thanks!

andrew-levy commented 6 months ago

@TowhidKashem I dont think you even need to open Xcode for this. You'll need the official SFSymbols macOS app, though.

TowhidKashem commented 6 months ago

@TowhidKashem I dont think you even need to open Xcode for this. You'll need the official SFSymbols macOS app, though.

Hmm that didn't work when I tried it just now, on the desktop app (latest version) I created a custom symbol by combining the moon and square stack icons:

Screenshot 2024-04-13 at 3 31 55 PM

It gave me this name: custom.moon.square.stack.fill which didn't show anything when called ike this:

  <SweetSFSymbol
    name="custom.moon.square.stack.fill"
    colors={['black']}
    size={300}
  />

for comparison this built in SF Symbol displays fine:

  <SweetSFSymbol
    name="moon.fill"
    colors={['black']}
    size={300}
  />

so the xcode or some other step might still be necessary...