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

feat: export system icons to allow individual overrides #1498

Closed
wants to merge 1 commit into from

Conversation

ak-beam
Copy link
Contributor

@ak-beam ak-beam commented Aug 9, 2023

  • Export the inline SVG icons from the system icon set so that overriding just one of them is easier, and overrides are future-proof (if a new one is added, it is used automatically). The goal is to make it possible to create the same type of inline asset table for building data-uris as the default library uses.

Docs: Customizing the System Library

import { registerIconLibrary } from '/dist/utilities/icon-library.js';
import { icons as baseIcons } from '/dist/components/icon/library.system.js';

const icons = {
  ...baseIcons,
  // custom overrides
  'x-circle-fill': `
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
    </svg>
  `
}

registerIconLibrary({
  name: 'system',
  resolver: (name: keyof typeof icons) => {
    if (name in icons) {
      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
    }
    return '';
  }
});

* Export the inline SVG icons from the system icon set so that 
  overriding just one of them is easier, and overrides are future- 
  proof (if a new one is added, it is used automatically).
@vercel
Copy link

vercel bot commented Aug 9, 2023

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

Name Status Preview Updated (UTC)
shoelace ✅ Ready (Inspect) Visit Preview Aug 9, 2023 11:16pm

@claviska
Copy link
Member

Thanks for the PR! While this feature is on the wishlist, we might want to expose a more obvious API for changing individual icons in a library. Something like this would probably be easier to document and it would give us way to tweak the underpinnings if needed later on.

import { setLibraryIcon } from '/dist/utilities/icon-library.js';

// function name tbd
setLibraryIcon('system', {
  resolver: name => `/path/to/custom/icons/${name}.svg`
});

This should probably go in src/components/icon/library.ts, as it will need to access the registry. You're welcome to take a stab at it if you want!

@ak-beam
Copy link
Contributor Author

ak-beam commented Aug 10, 2023

Hm, yeah I could see a more formal API being more maintainable for the library. In the meantime I came up with this workaround, just calling the default library if my override doesn't contain a match. What would make this more maintainable (as a consumer) would some documentation about which icons are in the base set, either in an export or just in the docs somewhere. Then I could send the defaults to my designer to tweak/override whenever there is a new icon.

export const customSystemLibrary: IconLibrary = {
  name: 'system',
  resolver: (name: string) => {
    if (name in icons) {
      return `data:image/svg+xml,${encodeURIComponent(icons[name as keyof typeof icons])}`
    }
    return systemLibrary.resolver(name) // FALLBACK
  },
}

@claviska
Copy link
Member

Thanks again for pushing this forward. I've opened #1503 to gather feedback and track this request officially.

@claviska claviska closed this Aug 11, 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

Successfully merging this pull request may close these issues.

None yet

2 participants