Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Is there a way to use multiple colours on a remote SVG file? #1841

Closed
namti opened this issue Aug 18, 2022 · 2 comments · May be fixed by #2584
Closed

Is there a way to use multiple colours on a remote SVG file? #1841

namti opened this issue Aug 18, 2022 · 2 comments · May be fixed by #2584
Labels
Question

Comments

@namti
Copy link

namti commented Aug 18, 2022

Question

I am using fontawesome duotone SVG from remote URL. Is there a way to set the colour for different element separately?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <style>.fa-secondary{opacity:.4}</style>
  </defs>
  <path class="fa-primary" d="M256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0V512z"/>
  <path class="fa-secondary" d="M256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512V0z"/>
</svg>

Thanks in advance!
@dppo
Copy link

dppo commented Nov 15, 2023

same problem

@jakex7
Copy link
Member

jakex7 commented Dec 17, 2024

Hi, unfortunately, there's no easy solution. The only option is to create a local custom component instead. For example:

import * as React from 'react';
import Svg, {Path} from 'react-native-svg';

export const Icon = (props: {primary?: string; secondary?: string}) => (
  <Svg viewBox="0 0 512 512">
    <Path
      d="M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0v512z"
      fill={props.primary}
    />
    <Path
      d="M256 0c141.4 0 256 114.6 256 256S397.4 512 256 512V0z"
      fill={props.secondary}
      opacity={0.4}
    />
  </Svg>
);

@jakex7 jakex7 closed this as completed Dec 17, 2024
@jakex7 jakex7 mentioned this issue Dec 20, 2024
Draft
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Question
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: additional stylesheet for SvgCss software-mansion/react-native-svg
4 participants
@namti @jakex7 @bohdanprog @dppo