Icons not working in 3.0.1?

[vladoyoung]

Describe the bug I have a package set up from the source code of Reshaped. After the update to 3.0.1 i can no longer import my icons to use them in the app where i've installed the package.

To Reproduce Codesandbox not working at all. Maybe it's expired?

Expected behavior I would like to be able to import the icons from the package like before

Screenshots This is my structure. I have a lot of custom icons within the source code. The custom icons follow the same format as the original ones from Reshaped

Here's how i used to import them:

I've also tried adding /dist/ in there for the path, but it doesn't work.

I assume this is caused by the new way of exporting components when building.

I might be missing something fundamental so let me know!

[vladoyoung]

I just tried

        "./icons/custom": {
            "types": "./dist/icons/custom/index.d.ts",
            "default": "./dist/cjs/icons/custom/index.js",
        },

in the package.json exports and now the IDE doesn't flag it up:

However, the app still doesn't recognise the files:

[vladoyoung]

Another update:

I've changed the default from the above code to "default": "./dist/icons/custom/index.js"

And it seems to be a good workaround so far. Icons are working

[blvdmitry]

@vladoyoung can you also try if adding this to the exports field works for you?

"./icons/*": {
  "types": "./dist/icons/*.d.ts",
  "import": "./dist/icons/*.js"
},

Would be nice to hear from you if just adding this on your side and mentioning it in the docs would cover your use case since each team might have their own structure for the stored icons. In v2 icons were also considered to be private to the library (for the NPM published version) but there was no way to prevent them from being accessed in the product code without exports

[vladoyoung]

Thanks for the suggestion. I tried that approach and the additional one below:

"./icons/**": {
    "types": "./dist/icons/**/*.d.ts",
    "import": "./dist/icons/**/*.js"
},

But unfortunately neither work. Maybe not specifying the exact paths just doesn't work?

I've reverted back to my previous solution as it's a good patch for now. Let me know if you want me to test anything else on my side.

[vladoyoung]

Leaving the folder structure reference if you need it:

/icons/
├── ArrowUpRight.tsx
├── Checkmark.tsx
├── ChevronDown.tsx
├── ChevronLeft.tsx
├── ChevronRight.tsx
├── ChevronVertical.tsx
├── Close.tsx
├── DotsHorizontal.tsx
├── Mic.tsx
├── Zap.tsx
└── custom
    ├── 360.tsx
    ├── 3DRotation.tsx
    ├── AccountCircle.tsx
    ├── AddCircle.tsx
    ├── AnnotationLine.tsx
    ├── AnnotationPolygon.tsx
    ├── Architecture.tsx
    ├── ArrowUpward.tsx
    ├── BigtopUpdates.tsx
    ├── Bolt.tsx
    ├── Build.tsx
    ├── Cameraswitch.tsx
    ├── Cancel.tsx
    ├── CheckCircle.tsx
    ├── ChevronRight.tsx
    ├── Circle.tsx
    ├── Close.tsx
    ├── CloudDownload.tsx
    ├── CloudUpload.tsx
    ├── Code.tsx
    ├── Colors.tsx
    ├── Construction.tsx
    ├── CreditCard.tsx
    ├── Crop.tsx
    ├── Crosshairs.tsx
    ├── Cube.tsx
    ├── CursorDefaultOutline.tsx
    ├── DarkMode.tsx
    ├── Delete.tsx
    ├── DeployedCode.tsx
    ├── DeployedCodeAlert.tsx
    ├── DesignServices.tsx
    ├── Download.tsx
    ├── DownloadFolder.tsx
    ├── Draft.tsx
    ├── DragPan.tsx
    ├── Edit.tsx
    ├── EmergencyHome.tsx
    ├── Excel.tsx
    ├── Explore.tsx
    ├── FilterAlt.tsx
    ├── Folder.tsx
    ├── FolderFilled.tsx
    ├── FolderZip.tsx
    ├── Fullscreen.tsx
    ├── FullscreenExit.tsx
    ├── Height.tsx
    ├── Home.tsx
    ├── Imagesmode.tsx
    ├── Info.tsx
    ├── Inventory.tsx
    ├── KeyboardArrowDown.tsx
    ├── KeyboardArrowLeft.tsx
    ├── Language.tsx
    ├── Layers.tsx
    ├── LightMode.tsx
    ├── Link.tsx
    ├── LocationOn.tsx
    ├── Mail.tsx
    ├── MapUgc.tsx
    ├── Maximize.tsx
    ├── Menu.tsx
    ├── Minimize.tsx
    ├── MoreHoriz.tsx
    ├── MoreVert.tsx
    ├── NewTab.tsx
    ├── Obj.tsx
    ├── OpenInNew.tsx
    ├── OpenInNewDown.tsx
    ├── Palette.tsx
    ├── Panorama.tsx
    ├── Pdf.tsx
    ├── Pending.tsx
    ├── PointScan.tsx
    ├── PostAdd.tsx
    ├── Quadcopter.tsx
    ├── Question.tsx
    ├── Rcs.tsx
    ├── RebaseEdit.tsx
    ├── ReceiptLong.tsx
    ├── ResetWrench.tsx
    ├── RestartAlt.tsx
    ├── Revit.tsx
    ├── Rotate90DegreesCw.tsx
    ├── Rust.tsx
    ├── Save.tsx
    ├── ScatterPlot.tsx
    ├── Search.tsx
    ├── Settings.tsx
    ├── Shape.tsx
    ├── Share.tsx
    ├── SignalCellularAlt.tsx
    ├── SourceEnvironment.tsx
    ├── Speed.tsx
    ├── SquareFoot.tsx
    ├── Straighten.tsx
    ├── StreetView.tsx
    ├── TextSnippet.tsx
    ├── Upload.tsx
    ├── UploadFile.tsx
    ├── Video2D.tsx
    ├── ViewInAr.tsx
    ├── VirtualReality.tsx
    ├── Visibility.tsx
    ├── VisibilityOff.tsx
    ├── Vision.tsx
    ├── WallpaperSlideshow.tsx
    ├── Warning.tsx
    └── index.tsx

[blvdmitry]

Thanks, I'll try it out, been testing it in the sandbox but only for the icons we have in the source

[blvdmitry]

Looked into this again and ended up on the same approach as you did, I'll make sure to cover this in the source code documentation page

"./icons/custom": {
  "types": "./dist/icons/custom/index.d.ts",
  "import": "./dist/icons/custom/index.js"
},