How to use svg icon in rescript?

1

Hello there!

I’m having trouble porting the following code:

import { ReactComponent as NotificationsIcon } from 'assets/notification-icon.svg'

How should I go about it?

2

Ups, found the equivalent in reasonml:

%%raw("
import { ReactComponent as _NotificationsIcon } from 'assets/notification-icon.svg'
")

module NotificationsIcon = {
  @react.component @val
  external make: unit => React.element = "_NotificationsIcon"
}

A bit unsafe, but I guess it works.

3

I’d suggest using something like GitHub - MoOx/react-from-svg: Transform SVG files into React components (native | web, JavaScript, which generates ReScript components too.

1 Like
4

Another option that may work for you:

module NotificationsIcon = {
  @module("assets/notification-icon.svg") @react.component
  external make: unit => React.element = "ReactComponent"
}
2 Likes