Skip to content

Support custom icons from an FA Kit in icon component #749

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
Draft
wants to merge 3 commits into
base: next
Choose a base branch
from
Draft

Support custom icons from an FA Kit in icon component #749

wants to merge 3 commits into from

Conversation

@robmadole
Copy link

@robmadole robmadole commented Feb 12, 2025 •
edited
Loading

Warning

This is for review right now and should not be merged. It won't work. I'll need to talk with Cory about next steps.

This modifies the icon component to do a couple of things:

  • Adds support for loading custom uploaded icons from a Pro Font Awesome Kit
  • Upgrades the icon component to 6.7.2 of Font Awesome (but in a brittle way)

How do you load a custom icon now?

Here was my test file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple HTML Page</title>

  <link rel="stylesheet" href="/wa/styles/themes/default.css" />

  <script type="module" data-webawesome="/wa">
    import { setKitCode } from '/wa/webawesome.loader.js';
    setKitCode('77169bc961');
  </script>
</head>
<body>
  <!-- Load a single color icon -->
  <wa-icon family="kit" variant="custom" name="my-icon"></wa-icon>

  <!-- Load a duotone icon -->
  <wa-icon family="kit-duotone" variant="custom" name="my-duotone-icon"></wa-icon>

  <!-- You can omit the variant right now, it doesn't matter. But should it? -->
  <wa-icon family="kit" name="my-other-icon"></wa-icon>
</body>
</html>

@vercel

This comment was marked as outdated.

Sign in to view
@robmadole robmadole changed the title Draft of changes for wa-icon to support custom icons from an FA Kit Support custom icons from an FA Kit in icon component Feb 12, 2025
@claviska
Copy link
Member

@robmadole is there more coming to this draft PR or is it ready for review?

@robmadole
Copy link
Author

@claviska I don't have any more work planned for it currently. But we don't have the service updated to support the new API in production yet (it's in our "epic" environment).

If you wanna chat through the code part though, that would be helpful.

@robmadole
Copy link
Author

Oh! Also, we have a task to update this component for version 7. So we may have a follow-up to this that adds even more families and styles. So it's headed for an even fatter lookup object. I don't know if that changes any of your thoughts.

@claviska
Copy link
Member

Oh, good to know. I was just making sure you weren't waiting on us. Carry on!

@vercel
Copy link

vercel bot commented May 20, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
webawesome ✅ Ready (Inspect) Visit Preview May 20, 2025 1:50pm

@robmadole
Copy link
Author

@claviska the Kits CDN now supports this (it was deployed with 7). I'll leave it to you to plan the next steps if you like.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@robmadole @claviska