[SF Symbols Search] Grid View and Filter by Category

[yug2005]

Description

Features:

• Grid View
• Filter symbols by category
• Copy SVG Code

Screencast

Checklist

• [x] I read the extension guidelines
• [x] I read the documentation about publishing
• [x] I ran npm run build and tested this distribution build in Raycast
• [x] I checked that files in the assets folder are used by the extension itself
• [x] I checked that assets used by the README are placed outside of the metadata folder

[raycastbot]

Thank you for your contribution! :tada:

🔔 @peteschaffner you might want to have a look.

[peteschaffner]

Thanks for doing this @yug2005!

Ironically, I've been working on transitioning this from a list to a category-filterable grid as well. I have a couple other things going into my changes too:

• automate generating the symbol data (names, symbols, categories, search terms, etc.) and images
• add a "Paste Name" action (following up on this merged PR)
• create a command icon that is more distinct from the SF Symbols application icon

Maybe we could hold off on merging your work, and I'll push my changes to my fork shortly so we can review and discuss the different ways of handling the category filtering and symbol image generation.

On that note, how did you generate the SVGs?

[yug2005]

@peteschaffner I did not generate the SVGs myself. Couldn't quite figure out how to do it. I am not very familiar with Swift so not sure if there is a way to do it from the playground you have. I took the SVGs from this Figma package.

This unfortunately means that not all SF symbols are there. I believe around 410 symbols are missing but I also found that this package had 71 symbols that your JSON file did not have.

[peteschaffner]

Yeah there were some new symbols added since I last created this extension… that is one reason I wanted to make it easier to generate/update all the symbol data.

I've just pushed the work I was doing here. It's very similar to what you've done, but I'm using raster images instead of SVGs (as it was easier to generate programmatically).

If you could give it a try/take a look and let me know your thoughts, I'd really appreciate it!

P.S. The data was generated from SF Symbols beta, version 4.0 (75), so there might be some glyphs that aren't available for you. Assuming we like the direction of these changes, I will try to generate the data from a stable release.

[yug2005]

@peteschaffner Wow! It works great! The search is also greatly improved and I like that the categories and icons show in the same order as in the SF Symbols app. But I have two requests :

• If possible, I would love to have SVG support and have actions for copying SVG code and downloading SVG symbol.
• Have preference for grid item size and showing title. I sometimes prefer without the name because of the clean look.

Also, why do you plan to generate data from stable release? I would love to have the extra symbols from the beta release.

[yug2005]

Also, I would love to be able to pin symbols and see recent symbols at the top (and be able to choose how many recent symbols should show). I have implemented this in my extension Icons8 and could add here as well if you would like @peteschaffner .

[peteschaffner]

Cool, glad you like it and that it is working well for you!

• If possible, I would love to have SVG support and have actions for copying SVG code and downloading SVG symbol.

This might be tricky, and I honestly don't have a clear idea of how I would generate the SVG. I think the Core Text framework might be the right place to start…

Out of curiosity, how do you use this SVG copying feature?

• Have preference for grid item size and showing title. I sometimes prefer without the name because of the clean look.

Sure, I will add in the show/hide title preference! As for the grid size, I'm quite happy with the default (small) size, but will give adding the preference some thought. It would require larger image assets, which would bloat the extension size.

Also, why do you plan to generate data from stable release? I would love to have the extra symbols from the beta release.

I believe that if you don't have either beta SF Symbols.app or Xcode.app, these new glyphs simply won't exist for you. I suppose having the SVG data would make this a non-issue to an extent, though 😉

Also, I would love to be able to pin symbols and see recent symbols at the top (and be able to choose how many recent symbols should show). I have implemented this in my extension Icons8 and could add here as well if you would like

Oh cool, I will check that out. How do you imagine pins/recents working when viewing any category other than "All"? This might be something worth following up on in another PR.

[yug2005]

Out of curiosity, how do you use this SVG copying feature?

I don't use it very often but I think it would be helpful if you want to quickly insert an icon or symbol in React development.

I'm quite happy with the default (small) size, but will give adding the preference some thought. It would require larger image assets, which would bloat the extension size.

Yeah, I think I will mostly use the small size as well but I think its nice to have the option. I tried the medium size with the current size of images, and it already looks good to me so I don't think larger images are required.

How do you imagine pins/recents working when viewing any category other than "All"?

I think that all pins and recent symbols should also be filtered when you select a category. So it would only show the pinned and recent symbols from that category.

[yug2005]

@peteschaffner Hey I made a commit building on top of your work. I added the icons for the categories, and decreased loading by removing the useEffect. Also, I only added symbols from the stable release. Take a look.

[peteschaffner]

Thank you so much for integrating all my work! This looks and works great for me, and I really like having icons for the categories 😍

I think this is ready to merge, but it looks like the build check is consistently failing, and I think it might have to do with having so many assets. @sxn, do you have any idea what we could do about that?

[yug2005]

Hey, I also added an action for copying/pasting Swift UI code for inserting an image with the symbol like Image(systemName: "square.and.pencil"). I think this would be helpful as well.

[peteschaffner]

Thanks for considering that. Unfortunately I don't want to add any more actions for the moment, as it can quickly get out of hand.

For instance, I'm using SF Symbols in lots of AppKit and UIKit projects (some of which are in Obj-C), thus the SwiftUI action wouldn't be helpful, and I'd then want to add UIImage/NSImage ones.

Hope that makes sense?

[peteschaffner]

@yug2005 While testing your fork, I ran into an issue generating the JSON data after cleaning the resources/generated data (make clean). In short, the metadata files I was fetching were always containing the beta symbol set, so I started in on some work to fix that.

While doing it, I realized I'd love to have a way to support both symbol sets (stable and beta), since I typically use the beta versions of Xcode and the symbols app in preparation for the next OS releases. So I made some changes that would scrape the appropriate data for both versions of symbols and generate respective JSON data that would then be loaded by the extension based on the version of SF Symbols app installed.

Would you be OK with me pushing my changes to your branch? I could also throw you a zip so you could see the changes if you'd prefer.

[yug2005]

@peteschaffner yeah feel free to push changes to the branch. I reverted the changes from the previous commit.

[yug2005]

@peteschaffner Any updates?

[peteschaffner]

I opened a PR on your PR branch that addressed the things I mentioned above:

While testing your fork, I ran into an issue generating the JSON data after cleaning the resources/generated data (make clean). In short, the metadata files I was fetching were always containing the beta symbol set, so I started in on some work to fix that.

While doing it, I realized I'd love to have a way to support both symbol sets (stable and beta), since I typically use the beta versions of Xcode and the symbols app in preparation for the next OS releases. So I made some changes that would scrape the appropriate data for both versions of symbols and generate respective JSON data that would then be loaded by the extension based on the version of SF Symbols app installed.

If everything looks good on your end, merging that should update things here and then I think we are ready to go!

[yug2005]

@peteschaffner Sorry I missed the PR on the branch. That was a couple of days ago lol. Check out the recent commit tho. I added pinned and recent symbols. I think this is also pretty useful

[pernielsentikaer]

Is this ready for review, or not yet 🙂

[yug2005]

Yes, ready for review

[pernielsentikaer]

@yug2005 / @peteschaffner Can either of you come up with a way to down the images from a remote path and extract them? It's a pretty heavy extension as it is right now (163MB) and we really want to try to keep the extension repository down

[yug2005]

Hello @pernielsentikaer, I moved the images to another repository and I am just using the raw image links. Is that ok?

[pernielsentikaer]

It seems to be much better, I get this when opening the command, is this something you can look into?

info  -  entry points [src/index.tsx]
ready -  built extension successfully
13:30:19.012 Error: Command failed: ls /Applications | grep 'SF Symbols beta.app'
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at Object.<anonymous> (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:36:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at JA (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:13:50455) {
  status: 1,
  signal: null,
  output: [ null, <Buffer >, <Buffer > ],
  pid: 10056,
  stdout: <Buffer >,
  stderr: <Buffer >
}
13:30:19.099 Error: Command failed: ls /Applications | grep 'SF Symbols beta.app'
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at null.getDataPath (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:45:9)
    at null.Command (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:59:31)
    at renderWithHooks (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:5854:22)
    at mountIndeterminateComponent (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:9321:17)
    at beginWork (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:10271:18)
    at beginWork$1 (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:14077:18)
    at performUnitOfWork (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:13528:16)
    at workLoopSync (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:13464:9) {
  status: 1,
  signal: null,
  output: [ null, <Buffer >, <Buffer > ],
  pid: 10059,
  stdout: <Buffer >,
  stderr: <Buffer >
} 
    at null.Command (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:61:31)
    at jt (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bu<…>
13:30:19.137 Error: Command failed: ls /Applications | grep 'SF Symbols beta.app'
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at null.getDataPath (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:45:9)
    at null.Command (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:59:31)
    at renderWithHooks (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:5854:22)
    at updateFunctionComponent (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:8964:24)
    at beginWork (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:10281:18)
    at beginWork$1 (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:14077:18)
    at performUnitOfWork (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:13528:16)
    at workLoopSync (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:13464:9) {
  status: 1,
  signal: null,
  output: [ null, <Buffer >, <Buffer > ],
  pid: 10068,
  stdout: <Buffer >,
  stderr: <Buffer >
} 
    at null.Command (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:61:31)
    at jt (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle<…>
13:30:19.346 Error: Command failed: ls /Applications | grep 'SF Symbols beta.app'
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at null.getDataPath (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:45:9)
    at null.Command (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:59:31)
    at renderWithHooks (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:5854:22)
    at updateFunctionComponent (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:8964:24)
    at beginWork (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:10281:18)
    at beginWork$1 (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:14077:18)
    at performUnitOfWork (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:13528:16)
    at workLoopSync (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/react-reconciler/react-reconciler.development.js:13464:9) {
  status: 1,
  signal: null,
  output: [ null, <Buffer >, <Buffer > ],
  pid: 10076,
  stdout: <Buffer >,
  stderr: <Buffer >
} 
    at null.Command (/Users/pernielsentikaer/Documents/Raycast/tmp/sf-symbols-search/src/index.tsx:61:31)
    at jt (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle<…>

[yug2005]

Hey @pernielsentikaer @peteschaffner, I removed the data generation from the extension for the time being. When there are updates to the Sf Symbols apps, we can regenerate the data and update through another PR. @pernielsentikaer Let me know if this fixes your error.

[pernielsentikaer]

I added a fallback image if, for some reason the picture doesn't load, are you okay with that, or do you want to add another one @yug2005

[yug2005]

@pernielsentikaer Yep I am ok with that

[yug2005]

@pernielsentikaer You can no longer copy SVG code

[raycastbot]

Published to the Raycast Store: https://raycast.com/peteschaffner/sf-symbols-search