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.

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

Add FavoriteFill icon #208

Open
naomigrace opened this issue Sep 9, 2020 · 3 comments
Open

Add FavoriteFill icon #208

naomigrace opened this issue Sep 9, 2020 · 3 comments

Comments

@naomigrace
Copy link

Requesting to add a fill version of the Favorite icon, similar to how Flag has a FlagFill version

@ShimiSun
Copy link
Collaborator

For now, here is an example how could that be achieved indirectly to a filled icon https://codesandbox.io/s/o7wjvrj3wy

@naomigrace
Copy link
Author

naomigrace commented Sep 19, 2020

For anyone who comes across this and wants to fill other icons like the Filter icon, you have to look inside the svg to see what selector to use (polygon for the Filter icon).

import styled, { css } from "styled-components";
import { Filter, Favorite } from "grommet-icons";

const filledIcon = css`
  path[fill="none"] {
    fill: rgb(229 36 59) !important;
  }
  polygon[fill="none"] {
    fill: rgb(229 36 59) !important;
  }
`;

export const FavoriteFilled = styled(Favorite)`
  ${(props) => (props.filled ? filledIcon : "")}
`;

export const FilterFilled = styled(Filter)`
  ${(props) => (props.filled ? filledIcon : "")}
`;

@taysea
Copy link
Collaborator

taysea commented Sep 13, 2023

Related to #274

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants