I'm building a component library using React, Typescript, Tailwind.

my site structure is setup like so:

src
--components
---- index.ts -> imports all the components
--icons
---- index.ts -> imports all the icons
--index.ts -> imports the components/icons

rollup.config.js
tsconfig.json

rollup.config.js

import url from "@rollup/plugin-url";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import postcss from "rollup-plugin-postcss";
import copy from "rollup-plugin-copy";
import commonJs from "@rollup/plugin-commonjs";

const config = {
  plugins: [
    url(),
    commonJs(),
    typescript(),
    postcss({
      config: {
        path: "./postcss.config.js",
      },
      extensions: [".css"],
      extract: true,
      minimize: true,
      plugins: [require("postcss-import")],
    }),
    copy({
      targets: [
        {
          src: ["src/assets/fonts/*.woff", "src/assets/fonts/*.woff2"],
          dest: "dist/fonts",
        },
      ],
    }),
  ],
  external: ["react", "react-dom", "react/jsx-runtime", "classnames"],
};

const es = {
  ...config,
  input: "src/index.ts",
  output: {
    format: "esm",
    preserveModules: true,
    dir: "dist/es",
  },
};

const cjs = {
  ...config,
  input: "src/index.ts",
  output: {
    format: "cjs",
    file: pkg.module,
  },
};

const umd = {
  ...config,
  input: "src/index.ts",
  output: {
    name: "DesignSystem",
    format: "umd",
    file: pkg.browser,
  },
};

export default [cjs, es, umd];

This is all working and building and I'm able to import into my project

import { Button, ArrowLeft } from "@myApp/my-design-system";

But what I'm wanting to do is split the Icons out into a separate import eg

import { Button } from "@myApp/my-design-system";
import { ArrowLeft } from "@myApp/my-design-system/icons";

But have tried multi entry points in rollup which works but the import has to go all the way to the folder which I'm not wanting to happen.

import { ArrowLeft } from "@myApp/my-design-system/dist/es/icons";