Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

svelte: Add lucide icons and new icon API#62908

Merged
fkling merged 6 commits into
mainfrom
fkling/srch-71-svelte-import-lucide-icons
May 29, 2024
Merged

svelte: Add lucide icons and new icon API#62908
fkling merged 6 commits into
mainfrom
fkling/srch-71-svelte-import-lucide-icons

Conversation

@fkling

@fkling fkling commented May 24, 2024

Copy link
Copy Markdown
Contributor

See also #62904.

This PR adds a new icon component (Icon2), which takes an svg component imported by unplugin-icons. To make things easier the icons can be auto-imported via unplugin-auto-import.

Usage example:

import Icon2 from '$lib/Icon2.svelte'

<Icon2 icon={ILucideX} inline />

unplugin-icons allows us to:

  • use other icon sets besides lucide, while using the same API. Other icon sets are necessary for file icons. react-icons, which we use in the React app, also pulls from multiple icon sets.
  • define our own icon sets

See https://github.com/unplugin/unplugin-icons for more information.

If it turns out that auto-importing (which involves generating TypeScrip types) doesn't work with our Bazel pipeline we can fall back to manual importing.

This PR converts some icons as example.

2024-05-24_17-39

Test plan

Manual testing.

@fkling fkling added the team/code-search Issues owned by the code search team label May 24, 2024
@fkling fkling requested review from camdencheek and vovakulikov May 24, 2024 15:49
@fkling fkling self-assigned this May 24, 2024
@cla-bot cla-bot Bot added the cla-signed label May 24, 2024
@fkling fkling force-pushed the fkling/srch-71-svelte-import-lucide-icons branch 2 times, most recently from 61a2b57 to de4b892 Compare May 24, 2024 15:51

@camdencheek camdencheek left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Stamping to unblock, but did not run it locally

Comment thread client/web-sveltekit/src/lib/Icon2.svelte Outdated
Comment thread client/web-sveltekit/src/lib/Icon2.svelte Outdated
fkling added 4 commits May 29, 2024 09:46
I have no idea why but moving the module declaration to `global.d.ts`
seems to fix the issue.
@fkling fkling force-pushed the fkling/srch-71-svelte-import-lucide-icons branch from 3c127e6 to 4964554 Compare May 29, 2024 08:16
@fkling fkling merged commit de52032 into main May 29, 2024
@fkling fkling deleted the fkling/srch-71-svelte-import-lucide-icons branch May 29, 2024 09:25
fkling added a commit that referenced this pull request May 31, 2024
This PR adds the inline file search to the file view.

## Changelog

- Refactored the existing CodeMirror extension to allow UI customization
- Moved utility functions around to avoid loading all of wildcard into the prototype (which lead to build errors)
- Tweaked the new icon component to better align within buttons (I missed that in #62908 because I didn't test it within buttons)
- Noticed that button group styles didn't apply correctly and the reason seemed to be that we were mixing sveltekit and react styles. So I copied the button styles into the sveltekit app.
- Added a switch component, following https://web.dev/articles/building/a-switch-component .
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

cla-signed team/code-search Issues owned by the code search team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants