Skip to content

Conversation

@snowystinger
Copy link
Member

@snowystinger snowystinger commented May 8, 2025

Closes

Adds an option to our icon builder so that users can build a library of icons more easily with the same processing we apply to our own S2 Icon library.

To run the new option, create a new npm project with an appropriate package.json, such as

{
  "name": "<<PACKAGE NAME>>",
  "version": "<<VERSION>>",
  "exports": {
    "./*": {
      "types": "./*.d.ts",
      "module": "./*.mjs",
      "import": "./*.mjs",
      "require": "./*.cjs"
    }
  },
  "peerDependencies": {
    "@react-spectrum/s2": ">=0.8.0",
    "react": "^18.0.0 || ^19.0.0-rc.1",
    "react-dom": "^18.0.0 || ^19.0.0-rc.1"
  },
  "devDependencies": {
    "@react-spectrum/s2-icon-builder": ">=0.2.3",
    "@react-spectrum/s2": "latest",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

Copy your svg icons into a src directory in the project.

Then run

yarn install --no-immutable
yarn transform-icons -i './src/*.svg' -o ./ --isLibrary

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Go to the last commit with a comment on it, check out the new artifact S2 Custom Icons
There should be an action button with an AlignRight icon in it.

🧢 Your Project:

@rspbot
Copy link

rspbot commented May 9, 2025

@rspbot
Copy link

rspbot commented May 9, 2025

"@babel/types": "7.24.0",
"@parcel/transformer-react-refresh-wrap": "2.14.0",
"@parcel/transformer-js": "2.14.0",
"@parcel/codeframe": "2.14.0",
Copy link
Member

Choose a reason for hiding this comment

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

?

Copy link
Member Author

Choose a reason for hiding this comment

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

we wind up with duplicates for some reason, it's the weirdest thing, even though 2.14 fulfills ^2.13.1... yarn decides it should be 2.15.1. So I locked down the ones I found to be getting strange duplicates

├─ @parcel/config-default@npm:2.14.0 [8657b]
│  └─ @parcel/transformer-js@npm:2.14.0 [ef688] (via npm:2.14.0 [ef688])
│
├─ @parcel/config-storybook@npm:0.0.2
│  └─ @parcel/transformer-js@npm:2.15.1 [144cf] (via npm:^2.13.1 [144cf])

name({bundle}) {
let mainAsset = bundle.getMainEntry();

if (!mainAsset?.filePath.includes('react-spectrum/packages')) {
Copy link
Member

Choose a reason for hiding this comment

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

This is the same logic as below? Could the if conditions be merged?

Copy link
Member Author

Choose a reason for hiding this comment

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

yeah, so open question about this due to ask for non-20 sized icons
I had it originally separate though as a reminder to see if there was a better condition we could use

@@ -0,0 +1,42 @@
# Parcel example
Copy link
Member

Choose a reason for hiding this comment

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

Maybe a different readme?

This reverts commit 605cfef.
# Conflicts:
#	packages/dev/s2-icon-builder/package.json
#	yarn.lock
This reverts commit 605cfef.
@rspbot
Copy link

rspbot commented May 22, 2025

@snowystinger snowystinger enabled auto-merge June 3, 2025 22:21
@snowystinger snowystinger added this pull request to the merge queue Jun 3, 2025
Merged via the queue into main with commit 842a44d Jun 3, 2025
30 checks passed
@snowystinger snowystinger deleted the icons branch June 3, 2025 23:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants