@thinkhuman/react-native-simple-icons 16.30.0 → 16.31.0

package/NOTICE.md

@@ -3,3 +3,5 @@
 Icon data is generated from [`simple-icons`](https://github.com/simple-icons/simple-icons), which is licensed under CC0-1.0.
 
 Brand names and trademarks belong to their owners.
+
+The website in `site/` is adapted from the [simpleicons.org website](https://github.com/simple-icons/simple-icons-website-rs), which is dedicated to the public domain under CC0-1.0.

package/README.md

@@ -1,13 +1,21 @@
 <p align="center">
-  <img src="./assets/simple-icons.svg" width="90" height="80" alt="Simple Icons">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/simple-icons-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="./assets/simple-icons.svg">
+    <img src="./assets/simple-icons.svg" width="90" height="80" alt="Simple Icons">
+  </picture>
 </p>
 
-<h1 align="center">@thinkhuman/react-native-simple-icons</h1>
+<h1 align="center">React Native Simple Icons</h1>
 
 <p align="center">
-  React Native icon components generated from the upstream <a href="https://www.npmjs.com/package/simple-icons">simple-icons</a> package.
+  <a href="https://simpleicons.org">Simple Icons</a> for React Native and Expo: 3,400+ brand and logo icons as typed SVG components, updated automatically with every <a href="https://www.npmjs.com/package/simple-icons">simple-icons</a> release.
 </p>
 
+<p align="center"><code>@thinkhuman/react-native-simple-icons</code></p>
+
+<p align="center"><a href="https://thinkhumandotdev.github.io/react-native-simple-icons/"><strong>Browse all icons →</strong></a></p>
+
 <p align="center">
   <a href="https://www.npmjs.com/package/@thinkhuman/react-native-simple-icons"><img src="https://img.shields.io/npm/v/@thinkhuman/react-native-simple-icons.svg" alt="npm version"></a>
   <a href="https://github.com/ThinkHumanDotDev/react-native-simple-icons/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/ThinkHumanDotDev/react-native-simple-icons/ci.yml?branch=main" alt="CI status"></a>
@@ -20,165 +28,60 @@
 npm install @thinkhuman/react-native-simple-icons react-native-svg
 ```
 
+Using Expo? Install `react-native-svg` with `npx expo install react-native-svg` so it matches your SDK.
+
 ## Usage
 
-```tsx
-import { SiReact } from "@thinkhuman/react-native-simple-icons";
+Find an icon on [simpleicons.org](https://simpleicons.org). Icons are exported as `Si` followed by the name run
+together and the first letter capitalised, for instance:
 
-export function Example() {
-  return <SiReact size={32} color="default" />;
-}
-```
+- [`Material Design`](https://simpleicons.org/?q=material%20design) is `SiMaterialdesign`
+- [`GitHub Actions`](https://simpleicons.org/?q=github%20actions) is `SiGithubactions`
 
-```tsx
-import { SiGithub } from "@thinkhuman/react-native-simple-icons";
-
-export function Example() {
-  return <SiGithub size={24} color="#000" accessibilityLabel="GitHub" />;
-}
-```
-
-Each icon exports its component and metadata:
+## Basic example
 
 ```tsx
-import { SiReact, SiReactHex, SiReactSlug, SiReactTitle } from "@thinkhuman/react-native-simple-icons";
-```
-
-`color="default"` uses the brand color from `simple-icons`. The regular color default is `"black"` because React Native support for `"currentColor"` is not consistent across targets.
-
-## API
-
-```ts
-import type { SvgProps } from "react-native-svg";
-
-export type IconProps = Omit<SvgProps, "color"> & {
-  size?: number | string;
-  color?: string | "default";
-  title?: string;
-};
-```
-
-Icons render with `viewBox="0 0 24 24"`. Remaining props are passed to `Svg`.
-
-## Generation
-
-Generate icons with:
-
-```sh
-bun run generate:icons
-```
-
-The generator imports all icon data from `simple-icons`, writes `src/icons`, writes `src/index.ts`, and records the processed version plus per-icon hashes in `src/simple-icons-manifest.json`.
-
-Generated output is deterministic. Running the generator twice with the same `simple-icons` version should not change files.
-
-## Validation
-
-Run the full local check with:
+import { SiReact } from "@thinkhuman/react-native-simple-icons";
 
-```sh
-bun run validate
+function BasicExample() {
+  return <SiReact color="#61DAFB" size={24} />;
+}
 ```
 
-CI runs the generator, checks `git diff --exit-code`, then runs typecheck, tests, and build.
-
-## Versioning
+## Change title
 
-The npm package version matches the processed `simple-icons` version (for example `16.19.0`). `bun run generate:icons` updates `package.json` and `src/simple-icons-manifest.json` together, so icon updates and the publishable version stay aligned.
+Each icon has an accessibility label that defaults to the brand name.
 
-## Updates
-
-`.github/workflows/update-icons.yml` runs every 3 days and can be started manually. It updates `simple-icons`, regenerates icons, classifies the changes, runs validation, and opens a PR when files changed.
-
-The update PR body includes the previous and new processed versions, added icons, removed icons, changed icons, suggested release type, and detected breaking changes.
-
-## Expanding on this project
-
-Install dependencies with:
-
-```sh
-bun install
+```tsx
+// title defaults to "React"
+<SiReact title="My title" size={24} />
 ```
 
-Use Bun for local development. The package is ESM-only and builds with `tsc` through `scripts/build-package.ts`.
-
-The following files are generated:
+## Use default color
 
-- `src/icons` contains one generated component per icon.
-- `src/index.ts` contains generated named exports.
-- `src/simple-icons-manifest.json` records the processed `simple-icons` version, component API hash, icon names, and per-icon hashes.
+Set `color` to `default` to use the brand color.
 
-`dist` is the build output and should not be committed.
-
-Common commands:
-
-```sh
-bun run generate:icons
-bun run classify:changes
-bun run typecheck
-bun run build
-bun run smoke:react-native
-bun run test
-bun run validate
+```tsx
+<SiReact color="default" size={24} />
 ```
 
-`bun run smoke:react-native` builds the package, creates a temporary React Native fixture, imports the package through Metro, and bundles it. This catches package export and React Native resolution problems that a plain Node import cannot catch.
-
-To test the packed package in an app:
-
-```sh
-bun run validate
-npm pack
-```
+### Use default color as hex
 
-Install the generated `.tgz` file into a fresh Expo or React Native app, then test both root imports and per-icon imports:
+Append `Hex` to the icon name to get the brand color as a hex string (without the `#`).
 
 ```tsx
-import { SiReact } from "@thinkhuman/react-native-simple-icons";
-import { SiYoutube } from "@thinkhuman/react-native-simple-icons/icons/SiYoutube";
-```
+import { SiReact, SiReactHex } from "@thinkhuman/react-native-simple-icons";
 
-Before publishing locally, run:
-
-```sh
-bun run validate
-npm pack --dry-run
+<SiReact color={`#${SiReactHex}`} size={24} />;
 ```
 
-`prepublishOnly` runs the same validation and dry-run pack check when you `npm publish` from your machine. The package publishes only `dist`, the manifest, README, license, notice, and package metadata.
-
-### Automated publish (GitHub Actions)
-
-Pushes to `main` on the upstream repo run [`.github/workflows/publish.yml`](.github/workflows/publish.yml) when `package.json` has a version that is not already on npm. Merging an icon update (or running `generate:icons` after bumping `simple-icons`) sets the version automatically; CI validates, publishes to npm, and creates a matching GitHub release (`v16.19.0`, etc.) with icon change notes.
-
-Forks cannot trigger a publish: the workflow checks `github.repository`, only runs on `push` to `main` (never on `pull_request` / `pull_request_target`), and does not use shared Actions caches.
-
-**One-time setup** uses [npm Trusted Publishers](https://docs.npmjs.com/trusted-publishers) (OIDC). No `NPM_TOKEN` secret is stored in GitHub.
-
-1. On [npm](https://www.npmjs.com/package/@thinkhuman/react-native-simple-icons) → **Settings** → **Publishing access** → **Add Trusted Publisher**:
-   - Publisher: **GitHub Actions**
-   - Organization or user: `ThinkHumanDotDev`
-   - Repository: `react-native-simple-icons`
-   - Workflow filename: `publish.yml`
-   - Environment name: `npm`
-2. On GitHub → **Settings → Environments** → **`npm`** (you already created this). Optionally add required reviewers or limit deployments to the `main` branch.
-3. Push this repository to GitHub so the trusted publisher can match the workflow run.
-
-The publish job uses `environment: npm` and `id-token: write`; `actions/setup-node` exchanges the OIDC token with npm at publish time.
-
-You can also run the workflow manually from the Actions tab (`workflow_dispatch`).
-
-When `simple-icons` releases a new version, use the update workflow or run the same steps locally:
-
-```sh
-bun add --dev --exact simple-icons@latest
-bun run generate:icons
-bun run classify:changes --markdown .github/update-summary.md --json .github/update-summary.json
-bun run validate
-```
+## Versioning
 
-Commit generated icon updates separately from tooling or documentation changes when possible. A typical update commit only changes `bun.lock`, `package.json`, `src/icons`, `src/index.ts`, and `src/simple-icons-manifest.json`.
+Versions match the [simple-icons](https://github.com/simple-icons/simple-icons/releases) release they are built
+from, and new releases are picked up automatically. Missing or outdated icons are fixed
+[upstream](https://github.com/simple-icons/simple-icons).
 
 ## License
 
-This package is MIT licensed. Icon data is generated from `simple-icons`, which is CC0-1.0.
+MIT. Icon data comes from simple-icons (CC0-1.0); brand names and trademarks belong to their owners. Contributions
+are welcome, see [CONTRIBUTING.md](CONTRIBUTING.md).

package/assets/simple-icons-dark.svg

@@ -0,0 +1,4 @@
+<svg role="img" width="90" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Simple Icons</title>
+  <path fill="#ffffff" d="M18 6a6 6 0 10-6 6 6 6 0 015.35 9h1.5A7.5 7.5 0 0012 10.5 4.5 4.5 0 1116.5 6Zm-6-3a3 3 0 000 6 1 1 0 000-6m0 1.5a1.5 1.5 0 010 3 1 1 0 010-3M7.5 15v1.5H9v6H4.5V24h15v-1.5H15v-6h1.5V15Zm3 1.5h3v6h-3zm-6 1.5a7.5 7.5 0 00.7 3h1.5a6 6 0 01-.7-3Z"/>
+</svg>

package/assets/simple-icons.svg

@@ -1,4 +1,4 @@
 <svg role="img" width="90" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <title>Simple Icons</title>
-  <path d="M18 6a6 6 0 10-6 6 6 6 0 015.35 9h1.5A7.5 7.5 0 0012 10.5 4.5 4.5 0 1116.5 6Zm-6-3a3 3 0 000 6 1 1 0 000-6m0 1.5a1.5 1.5 0 010 3 1 1 0 010-3M7.5 15v1.5H9v6H4.5V24h15v-1.5H15v-6h1.5V15Zm3 1.5h3v6h-3zm-6 1.5a7.5 7.5 0 00.7 3h1.5a6 6 0 01-.7-3Z"/>
+  <path fill="#000000" d="M18 6a6 6 0 10-6 6 6 6 0 015.35 9h1.5A7.5 7.5 0 0012 10.5 4.5 4.5 0 1116.5 6Zm-6-3a3 3 0 000 6 1 1 0 000-6m0 1.5a1.5 1.5 0 010 3 1 1 0 010-3M7.5 15v1.5H9v6H4.5V24h15v-1.5H15v-6h1.5V15Zm3 1.5h3v6h-3zm-6 1.5a7.5 7.5 0 00.7 3h1.5a6 6 0 01-.7-3Z"/>
 </svg>

package/dist/icons/SiAlphaxiv.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { IconProps } from "../types.js";
+export declare const SiAlphaxivHex = "9A2036";
+export declare const SiAlphaxivTitle = "alphaXiv";
+export declare const SiAlphaxivSlug = "alphaxiv";
+export declare function SiAlphaxiv({ size, color, title, ...props }: IconProps): React.ReactElement;

package/dist/icons/SiAlphaxiv.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+export const SiAlphaxivHex = "9A2036";
+export const SiAlphaxivTitle = "alphaXiv";
+export const SiAlphaxivSlug = "alphaxiv";
+export function SiAlphaxiv({ size = 24, color = "black", title, ...props }) {
+    const resolvedColor = color === "default" ? `#${SiAlphaxivHex}` : color;
+    return (React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", accessibilityLabel: title ?? SiAlphaxivTitle, ...props },
+        React.createElement(Path, { fill: resolvedColor, d: "M19.749 12.21 24 16.46l-1.827 1.821-4.248-4.23zm-10.6-8.626a4.03 4.03 0 0 1 3.09 1.12L15.4 7.867l-1.841 1.822-3.232-3.226A1.38 1.38 0 0 0 8.55 6.5l-6.725 6.722L0 11.399l6.84-6.837a4.06 4.06 0 0 1 2.309-.979m13.026.033L24 5.44 10.032 19.403c-3.823 3.204-8.805-1.788-5.58-5.598l5.361-5.356 1.825 1.824-5.274 5.271c-1.108 1.347.633 3.054 1.96 1.921z" })));
+}

package/dist/index.d.ts

@@ -107,6 +107,7 @@ export { SiAllegro, SiAllegroHex, SiAllegroSlug, SiAllegroTitle } from "./icons/
 export { SiAlliedmodders, SiAlliedmoddersHex, SiAlliedmoddersSlug, SiAlliedmoddersTitle } from "./icons/SiAlliedmodders.js";
 export { SiAlltrails, SiAlltrailsHex, SiAlltrailsSlug, SiAlltrailsTitle } from "./icons/SiAlltrails.js";
 export { SiAlmalinux, SiAlmalinuxHex, SiAlmalinuxSlug, SiAlmalinuxTitle } from "./icons/SiAlmalinux.js";
+export { SiAlphaxiv, SiAlphaxivHex, SiAlphaxivSlug, SiAlphaxivTitle } from "./icons/SiAlphaxiv.js";
 export { SiAlpinedotjs, SiAlpinedotjsHex, SiAlpinedotjsSlug, SiAlpinedotjsTitle } from "./icons/SiAlpinedotjs.js";
 export { SiAlpinelinux, SiAlpinelinuxHex, SiAlpinelinuxSlug, SiAlpinelinuxTitle } from "./icons/SiAlpinelinux.js";
 export { SiAlternativeto, SiAlternativetoHex, SiAlternativetoSlug, SiAlternativetoTitle } from "./icons/SiAlternativeto.js";

package/dist/index.js

@@ -106,6 +106,7 @@ export { SiAllegro, SiAllegroHex, SiAllegroSlug, SiAllegroTitle } from "./icons/
 export { SiAlliedmodders, SiAlliedmoddersHex, SiAlliedmoddersSlug, SiAlliedmoddersTitle } from "./icons/SiAlliedmodders.js";
 export { SiAlltrails, SiAlltrailsHex, SiAlltrailsSlug, SiAlltrailsTitle } from "./icons/SiAlltrails.js";
 export { SiAlmalinux, SiAlmalinuxHex, SiAlmalinuxSlug, SiAlmalinuxTitle } from "./icons/SiAlmalinux.js";
+export { SiAlphaxiv, SiAlphaxivHex, SiAlphaxivSlug, SiAlphaxivTitle } from "./icons/SiAlphaxiv.js";
 export { SiAlpinedotjs, SiAlpinedotjsHex, SiAlpinedotjsSlug, SiAlpinedotjsTitle } from "./icons/SiAlpinedotjs.js";
 export { SiAlpinelinux, SiAlpinelinuxHex, SiAlpinelinuxSlug, SiAlpinelinuxTitle } from "./icons/SiAlpinelinux.js";
 export { SiAlternativeto, SiAlternativetoHex, SiAlternativetoSlug, SiAlternativetoTitle } from "./icons/SiAlternativeto.js";

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@thinkhuman/react-native-simple-icons",
-  "version": "16.30.0",
-  "description": "React Native components generated from simple-icons data.",
+  "version": "16.31.0",
+  "description": "React Native Simple Icons: 3,400+ brand and logo icons from Simple Icons as typed React Native and Expo SVG components.",
   "type": "module",
   "license": "MIT",
   "author": "ThinkHuman",
-  "homepage": "https://github.com/ThinkHumanDotDev/react-native-simple-icons#readme",
+  "homepage": "https://thinkhumandotdev.github.io/react-native-simple-icons/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ThinkHumanDotDev/react-native-simple-icons.git"
@@ -15,11 +15,21 @@
   },
   "keywords": [
     "react-native",
-    "expo",
+    "react-native-simple-icons",
     "simple-icons",
+    "expo",
+    "expo-icons",
     "icons",
+    "brand-icons",
+    "brand-logos",
+    "logos",
+    "logo",
     "svg",
-    "react-native-svg"
+    "svg-icons",
+    "react-native-svg",
+    "react-native-icons",
+    "social-icons",
+    "typescript"
   ],
   "sideEffects": false,
   "files": [
@@ -57,6 +67,7 @@
     "generate:icons": "bun scripts/generate-icons.ts",
     "classify:changes": "bun scripts/classify-changes.ts",
     "build": "bun scripts/build-package.ts",
+    "build:site": "bun scripts/build-site.ts",
     "smoke:react-native": "bun scripts/smoke-react-native.ts",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
@@ -75,7 +86,7 @@
     "react": "^18.3.1",
     "react-native": "^0.76.5",
     "react-native-svg": "^15.10.1",
-    "simple-icons": "16.30.0",
+    "simple-icons": "16.31.0",
     "typescript": "^5.7.2",
     "vitest": "^2.1.8"
   },

package/src/simple-icons-manifest.json

@@ -1,7 +1,7 @@
 {
-  "simpleIconsVersion": "16.30.0",
+  "simpleIconsVersion": "16.31.0",
   "componentApiHash": "6dc22d1820219f72f2f5a625c1f72349159eff5766d8884714f61688a25df1e7",
-  "count": 3459,
+  "count": 3460,
   "iconNames": [
     "Si1001Tracklists",
     "Si1And1",
@@ -111,6 +111,7 @@
     "SiAlliedmodders",
     "SiAlltrails",
     "SiAlmalinux",
+    "SiAlphaxiv",
     "SiAlpinedotjs",
     "SiAlpinelinux",
     "SiAlternativeto",
@@ -4112,6 +4113,12 @@
       "hex": "000000",
       "hash": "974c1fc4258b5159d4b5a8aae8bd1f523c7b9e24730b3e5f546a8b88174b7cee"
     },
+    "SiAlphaxiv": {
+      "title": "alphaXiv",
+      "slug": "alphaxiv",
+      "hex": "9A2036",
+      "hash": "2c59cb193ba323746fe3005cf8065c1db2aed61162d5d3b283590ff277084902"
+    },
     "SiAlpinedotjs": {
       "title": "Alpine.js",
       "slug": "alpinedotjs",