Add new @plone/icons package for icon management

apps/aurora/package.json

@@ -30,6 +30,7 @@
     "@plone/components": "workspace:*",
     "@plone/contents": "workspace:*",
     "@plone/helpers": "workspace:*",
+    "@plone/icons": "workspace:*",
     "@plone/layout": "workspace:*",
     "@plone/plate": "workspace:*",
     "@plone/publicui": "workspace:*",

apps/aurora/registry.config.ts

@@ -7,6 +7,7 @@ const addons = [
   '@plone/publicui',
   '@plone/contents',
   '@plone/agave',
+  '@plone/icons',
 ];
 const theme = '';
 

packages/icons/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

packages/icons/.npmignore

@@ -0,0 +1,6 @@
+news
+towncrier.toml
+.changelog.draft
+node_modules/
+.release-it.json
+.eslintrc.js

packages/icons/.release-it.json

@@ -0,0 +1,30 @@
+{
+  "plugins": {
+    "../scripts/prepublish.js": {}
+  },
+  "hooks": {
+    "after:bump": [
+      "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft",
+      "pipx run towncrier build --yes --version ${version}",
+      "pnpm build"
+    ],
+    "after:release": "rm .changelog.draft"
+  },
+  "npm": {
+    "publish": false
+  },
+  "git": {
+    "commitArgs": ["--no-verify"],
+    "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
+    "requireUpstream": false,
+    "requireCleanWorkingDir": false,
+    "commitMessage": "Release @plone/icons ${version}",
+    "tagName": "plone-icons-${version}",
+    "tagAnnotation": "Release @plone/icons ${version}"
+  },
+  "github": {
+    "release": true,
+    "releaseName": "@plone/icons ${version}",
+    "releaseNotes": "cat .changelog.draft"
+  }
+}

packages/icons/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @plone/icons Release Notes
+
+<!-- Do *NOT* add new change log entries to this file.
+     You should create a file in the news directory instead.
+     For helpful instructions, please see:
+     https://6.docs.plone.org/contributing/index.html#contributing-change-log-label
+-->
+
+<!-- towncrier release notes start -->

packages/icons/Makefile

@@ -0,0 +1,25 @@
+# Project settings
+include ../../variables.mk
+
+.PHONY: all
+all: help
+
+.PHONY: help
+help: ## This help message
+	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/$(CYAN)\1$(RESET):\2/' | column -c2 -t -s :)"
+
+.PHONY: install
+install: ## Install dependencies
+	pnpm install
+
+.PHONY: build
+build: ## Build the package
+	pnpm run --if-present build
+
+# .PHONY: storybook-start
+# storybook-start: ## Start Storybook
+# 	pnpm run storybook
+
+# .PHONY: storybook-build
+# storybook-build: ## Build Storybook
+# 	pnpm run build-storybook

packages/icons/components/Icon/Icon.test.tsx

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import config from '@plone/registry';
+import Icon from './Icon';
+
+describe('Icon', () => {
+  afterEach(() => {
+    config.icons = {};
+  });
+
+  it('renders a registered icon by name', () => {
+    const RegisteredIcon = () => (
+      <svg role="img" aria-label="registered-icon" />
+    );
+
+    config.registerIcon('registered', RegisteredIcon);
+
+    render(<Icon name="registered" />);
+
+    expect(
+      screen.getByRole('img', { name: 'registered-icon' }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render when the icon is missing', () => {
+    const { container } = render(<Icon name="missing" />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders the exact registered component, not a fallback', () => {
+    const CustomIcon = () => <svg data-testid="custom-icon" />;
+
+    config.registerIcon('custom', CustomIcon);
+
+    render(<Icon name="custom" />);
+
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+  });
+});

packages/icons/components/Icon/Icon.tsx

@@ -0,0 +1,19 @@
+import config from '@plone/registry';
+
+interface IconProps {
+  name: string;
+}
+
+const Icon = (props: IconProps) => {
+  const { name } = props;
+
+  const IconComponent = config.getIcon(name);
+
+  if (IconComponent === undefined) {
+    return null;
+  }
+
+  return <IconComponent />;
+};
+
+export default Icon;