How to handle SvrUri when font family is indeterminate

[mattmarcello]

Question

Consider this scenario: you are building an image gallery. You query some index API which returns a list of URIs, some with standard image extensions, other with .svg. You do not control the content of these svg assets and they may reference font that are unavailable at runtime, resulting in a Unrecognized font family ... error.

What do you do to solve this? I assume it is not possible to lazily load fonts at runtime, so the next best solution presumably would be to just override the font. Of course, this meaningfully alters the resultant image.

Anyway, curious if anyone has encountered this or has thoughts.

[phips28]

I have the same issue: Unrecognized font family '-apple-system' on Simulator (havent tested on real device)

[mattmarcello]

I dont think there is a solution here unless you can import fonts at runtime ( which im fairly certain is not possible ). This is assuming that you do not know the font family ahead of build time. I ended up building a service to convert svgs to pngs at runtime which was fine for my use case. good luck!

On April 11, 2023, Cem Olcay @.***> wrote:

I have the same issue: Unrecognized font family '-apple-system' on Simulator (havent tested on real device)

— Reply to this email directly, view it on GitHub https://github.com/software-mansion/react-native-svg/issues/2017#issuecomment-1504087094, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABEIQR3WIJRCAM5S3LQHNELXAXBFNANCNFSM6AAAAAAWKX4F4A . You are receiving this because you authored the thread.Message ID: @.***>

[phips28]

I did a quick fix: remove the font-family out of the xml. (might break some svgs, but they are breaking the app anyways 😄)

/**
 * Copy/paste from react-native-svg
 * But with a fix for font-family
 */
export function SvgCssUri(props: UriProps) {
  const { uri, onError = err, onLoad } = props
  const [xml, setXml] = useState<string | null>(null)
  useEffect(() => {
    uri
      ? fetchText(uri)
          .then((data) => {
            if (data.includes('font-family')) {
              // remove font-family from SVG, as this throws "Unrecognized font family" error
              data = data.replace(/font-family:.*;/g, '')
            }
            setXml(data)
            onLoad?.()
          })
          .catch(onError)
      : setXml(null)
  }, [onError, uri, onLoad])
  return <SvgCss xml={xml} override={props} />
}

What service are you using to convert svg to png?

[mattmarcello]

that'll work too :)

On April 11, 2023, Cem Olcay @.***> wrote:

I did a quick fix: remove the font-family out of the xml. (might break some svgs, but they are breaking the app anyways 😄)

/**

• Copy/paste from react-native-svg/src/SvgUri.tsx
• But with a fix for font-family / export function SvgCssUri(props: UriProps) { const { uri, onError = err, onLoad } = props const [xml, setXml] = useState<string | null>(null) useEffect(() => { uri ? fetchText(uri) .then((data) => { if (data.includes('font-family')) { // remove font-family from SVG, as this throws "Unrecognized font family" error data = data.replace(/font-family:.;/g, '') } setXml(data) onLoad?.() }) .catch(onError) : setXml(null) }, [onError, uri, onLoad]) return }

[bohdanprog]

Hi @mattmarcello, Could you provide us with some examples to test that feature? Thank you!