Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions public/skills/icons/references/logos.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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

Expand Down
4 changes: 2 additions & 2 deletions src/pages/docs/heading-bodies.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1783,15 +1783,15 @@ 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 <Icon name="x" /> 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 <Icon name="x" /> 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.',
},
'/docs/integrations/icons-and-logos': {
'accessible-labeling':
'Icons and logos render aria-hidden="true" and skip a <title> 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':
Expand Down
Loading