Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@green-stack/icons
- Aetherspace PluginPrerequisites:
Usage -- SVG icon libraries with
@green-stack/icons
With this package, you can use any of the following icon libraries in web or mobile, without any downsides:
@nandorojo/iconic
(NPM)@nandorojo/heroicons
(NPM)Solito Docs: Expo + Next.js Icon recipes
We'll be gathering more similar SVG icon libraries with react-native support under
/packages/@green-stack-icons
. Which functions mostly as a collection of these cross-platform enabled iconsets gathered in one place... But it also has a handy script for turning your own folder of.svg
icons into your own custom set of React-Native SVG components:Generating your own icon set from .svg files
with/green-stack-icons
plugin branch, or copy-paste in/packages/@green-stack-icons/
.svg
files in/packages/@green-stack-icons/assets/{your-icon-set-name}/
yarn workspace @green-stack/icons regenerate
to create icon components from your.svg
files@green-stack/icons/{your-icon-set-name}/{your-icon-name}
OR, register them for use with
<AetherIcon/>
:Better DX with
AetherIcon
This will enable:
name
prop on the AetherIcon componentExample registration (in e.g.
feature/{workspace}/icons/registry.tsx
)Example codegen
yarn ats collect-icons # or just "yarn dev" as it's part of the next.config.js automations
Example usage of
AetherIcon
(which uses the generated icon registry under the hood)The AetherIcon way of working is fully optional and only exists to keep your feature and packages workspaces copy-pastable between Aetherspace projects by applying some minimal codegen on top.
Roadmap - More to come
@green-stack/icons
is an Aetherspace plugin branch that's already usable, but will be expanded on in the future. Follow the maintainer on Github, Twitter or Bluesky to stay up to date on the latest developments.