appuniversum / ember-appuniversum

Ember addon wrapping the appuniversum components.
https://appuniversum.github.io/ember-appuniversum
MIT License
14 stars 11 forks source link

[Experimental] Add icon components #487

Closed Windvis closed 8 months ago

Windvis commented 8 months ago

[!NOTE]
This is a recreation of #483 to fix the git history.

This adds icon components for each .svg file in the /public/icons folder. We don't register them in the global component namespace, to use them you need to import them in your JS files and pass them through the template context. This a lot more intuitive in the .gjs world, but it still works in loose-mode as well, but it is more verbose.

This PR isn't very useful by itself, but together with #481 it can be used to replace the string based icon setup.

[!WARNING]
This setup is still in an experimental state. We want to try it out in a couple of specific places before considering this ready to use by all the Appuniversum users. We might still break the setup in future minor versions until we announce it as stable.

Usage examples (These examples assume #481 is merged) ### Polaris ```gjs // some-delete-button.gjs import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin'; import AuButton from '@appuniversum/ember-appuniversum/components/au-button'; ``` ### Octane ```js // some-delete-button.js import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin'; import Component from '@glimmer/component'; export default class SomeDeleteButton extends Component { BinIcon = BinIcon; } ``` ```hbs {{! some-delete-button.hbs}} Delete something ```

Part of the solution for #482