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 'custom icon' use-case to docs #21

Closed
kdaquila opened this issue Dec 3, 2022 · 3 comments
Closed

Add 'custom icon' use-case to docs #21

kdaquila opened this issue Dec 3, 2022 · 3 comments

Comments

@kdaquila
Copy link

kdaquila commented Dec 3, 2022

Summary:

Consider updating the docs about custom icons as a feature or use-case

Details:

After looking through the solid-icon tests, I realized that it is actually quite easy to use solid-icons to make custom icons. One can simply pass the path data and view box to the IconTemplate directly.

I think it would be great to add something about this to the project's README.md file. Using solid-icons to make custom icons might not be obvious to a new user, and yet, it can be a very useful feature for the case when you need to draw a new icon to match those from a library.

Example of creating a custom icon component:

import { IconProps, IconTemplate, IconTree } from "solid-icons";

export default function FlameIcon(props: IconProps) {
  const iconTree: IconTree = {
    a: { fill: "currentColor", viewBox: "0 0 384 512" },
    c: '<path d="M384 319.1C384 425.9 297.9 512 192 512S0 425.87 0 320c0-58.67 27.82-106.8 54.57-134.1C69.54 169.3 96 179.8 96 201.5V287c0 35.17 27.97 64.5 63.16 64.94C194.9 352.5 224 323.6 224 288c0-88-175.1-96.12-52.15-277.2C185.35-8.92 216 .03 216 23.83 215.1 127 384 149.7 384 319.1z"/>',
  };

  return IconTemplate(iconTree, props);
}

Example usage of a custom component

<div>
   <FlameIcon size="50px"/>
</div>
@x64Bits
Copy link
Owner

x64Bits commented Dec 5, 2022

Oh sounds like a great idea as for Advance Usage, can you send a PR of this? or as soon as I have time I'll send it?

@TheElegantCoding
Copy link

I like this approach, custom icons are necessary in some cases where the design is unique for a enterprise, would be nice to have a component for this

@x64Bits
Copy link
Owner

x64Bits commented May 31, 2023

Hi guys, in the latest version of solid-icons@1.0.5 there is this feature, related PR: #35

@x64Bits x64Bits closed this as completed May 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants