diff --git a/public/skills/icons/references/logos.md b/public/skills/icons/references/logos.md index 6a145ee..46e7c58 100644 --- a/public/skills/icons/references/logos.md +++ b/public/skills/icons/references/logos.md @@ -11,7 +11,7 @@ Use `@askrjs/logos` for an authorized brand mark, not for general interface concepts. The installed package currently determines which marks are available. -At version 0.2.1 it exports Apple, Facebook, GitHub, Google, and Microsoft logo +The curated catalog exports Apple, Facebook, GitHub, Google, and Microsoft logo components. Verify the installed declarations rather than assuming another brand is present. @@ -27,9 +27,10 @@ Import a named logo from the package root: import { GitHubLogo, GoogleLogo } from '@askrjs/logos'; ``` -Focused subpaths such as `@askrjs/logos/logos/github` are also published. -Verify the installed export before using one. The package has no runtime logo -registry or string-selected logo component. +Root imports support tree shaking. The 0.5 migration removes individual logo +subpaths and factory helpers. Use `IconBase` and `IconProps` from +`@askrjs/askr/foundations/icon` for custom marks and prop annotations. The package +has no runtime logo registry or string-selected logo component. ## Preserve brand treatment diff --git a/src/pages/docs/heading-bodies.ts b/src/pages/docs/heading-bodies.ts index e482ff2..8be58cd 100644 --- a/src/pages/docs/heading-bodies.ts +++ b/src/pages/docs/heading-bodies.ts @@ -1783,7 +1783,7 @@ export const headingOverrides: Readonly< 'editor-integration': "@askrjs/monaco wraps Monaco Editor in a single component, MonacoEditor, instead of building a new editor abstraction on top of it. You get Monaco's real options object, model, and namespace back through props and refs, so anything you already know about Monaco's API still applies. The wrapper's job stops at mounting and disposing — there's no built-in resize handling to keep the host div sized as its container changes, so size the wrapper element yourself (CSS, a `ResizeObserver`, whatever fits your layout) rather than assuming the component tracks that for you.", 'icons-and-logos': - '@askrjs/lucide ships one Askr component per Lucide SVG, and @askrjs/logos does the same for a handful of brand marks (GitHub, Facebook, Microsoft, Apple, Google). Both packages generate their components with the same createIcon/createLogo helper over @askrjs/askr/foundations, so every icon and logo shares one SVG contract: consistent data attributes, size tokens, and accessibility behavior. Neither package ships a runtime registry or a string-keyed API — you import the named component you want.', + '@askrjs/lucide ships one Askr component per Lucide SVG, and @askrjs/logos does the same for a handful of brand marks (GitHub, Facebook, Microsoft, Apple, Google). Both packages share the core IconBase contract: consistent data attributes, size tokens, and accessibility behavior. Neither package ships a runtime registry or a string-keyed API — you import the named component you want.', 'ssr-constraints': 'Monaco is a browser-only editor built around the DOM and web workers, so MonacoEditor has no meaningful server-rendered output beyond its host div — plan for a loading state or client-only boundary around it. Icons and logos are plain SVG markup and render identically on the server and the client, including their aria-hidden and data-* attributes, so they need no special SSR handling.', }, @@ -1791,7 +1791,7 @@ export const headingOverrides: Readonly< 'accessible-labeling': 'Icons and logos render aria-hidden="true" and skip a element until you pass one — that\'s the decorative default. Passing title="Search" (or similar) drops aria-hidden and adds a real <title> node inside the SVG, which is what you want on a mark that carries meaning on its own. For icon-only buttons, prefer an aria-label on the button itself over relying on the icon\'s title.', 'brand-logos': - '@askrjs/logos currently covers five marks — GitHub, Facebook, Microsoft, Apple, and Google — each exported by name (GitHubLogo, FacebookLogo, and so on) or reachable individually through @askrjs/logos/logos/*. Apple and GitHub inherit currentColor so they follow surrounding text; Facebook, Google, and Microsoft keep fixed brand colors so the marks stay recognizable regardless of theme.', + '@askrjs/logos covers five marks — GitHub, Facebook, Microsoft, Apple, and Google — imported by name from the package root (GitHubLogo, FacebookLogo, and so on). Root imports support tree shaking. The 0.5 migration removes individual logo subpaths and factory helpers; use IconBase and IconProps from @askrjs/askr/foundations/icon for custom marks. Apple and GitHub inherit currentColor so they follow surrounding text; Facebook, Google, and Microsoft keep fixed brand colors so the marks stay recognizable regardless of theme.', 'icon-contract': 'Every icon from @askrjs/lucide and every logo from @askrjs/logos renders through the same shared contract from @askrjs/askr/foundations: data-slot="icon", a data-icon name, a data-size token (sm/md/lg/xl) when you use one of the named sizes, and data-decorative="true" when no title is set. Size and stroke width also resolve through CSS custom properties (--ak-icon-size, --ak-icon-stroke-width), so a theme can restyle icons globally without touching component code.', 'lucide-imports':