tauri-plugin-system-symbols-react 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 insd47
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# tauri-plugin-system-symbols-react
+
+React SVG components for
+[`tauri-plugin-system-symbols`](https://github.com/insd47/tauri-plugin-system-symbols).
+
+Use this package when your Tauri frontend is built with React. The native symbol
+resolution, cache, and Tauri commands live in the core plugin repository:
+
+https://github.com/insd47/tauri-plugin-system-symbols
+
+## Install
+
+```sh
+pnpm add tauri-plugin-system-symbols-react tauri-plugin-system-symbols @tauri-apps/plugin-os
+```
+
+The Tauri app must register:
+
+- `tauri-plugin-system-symbols`
+- `@tauri-apps/plugin-os`
+
+See the core plugin README for Rust setup and capability permissions:
+
+https://github.com/insd47/tauri-plugin-system-symbols#install
+
+## Usage
+
+```tsx
+import Symbol from 'tauri-plugin-system-symbols-react'
+
+export function Toolbar() {
+  return (
+    <Symbol
+      symbol="square.and.arrow.up"
+      icon={"\uE8BB"}
+      size={16}
+    />
+  )
+}
+```
+
+`size` is sent to the native resolver and is also used as the default SVG
+`width` and `height`. When omitted, it defaults to `16`. `Symbol` uses
+`platform()` from `@tauri-apps/plugin-os`.
+
+## Exports
+
+- default `Symbol`
+
+The component extends `SVGProps<SVGSVGElement>`.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var pluginOs = require('@tauri-apps/plugin-os');
+var react = require('react');
+var tauriPluginSystemSymbols = require('tauri-plugin-system-symbols');
+
+/**
+ * Renders a platform system symbol as an SVG.
+ *
+ * @param symbol SF Symbols name used when `platform()` is `"macos"`.
+ * @param icon Segoe glyph used when `platform()` is `"windows"`.
+ * @param size Target icon size in CSS pixels. Defaults to `16`.
+ * @param props
+ */
+function Symbol({ symbol, icon, size, ...props }) {
+    const key = pluginOs.platform() === 'macos' ? symbol : icon;
+    const [current, setCurrent] = react.useState(() => ({ key, size, path: tauriPluginSystemSymbols.getCachedSymbol(key, size) }));
+    react.useLayoutEffect(() => {
+        if (current.key === key && current.size === size && current.path)
+            return;
+        let active = true;
+        tauriPluginSystemSymbols.getSymbol(key, size).then((path) => {
+            if (active)
+                setCurrent({ key, size, path });
+        });
+        return () => {
+            active = false;
+        };
+    }, [key, size]);
+    return (jsxRuntime.jsx("svg", { fill: "currentColor", height: size, viewBox: `0 0 ${size} ${size}`, width: size, "data-symbol": key, ...props, children: current.path?.map((props, index) => (jsxRuntime.jsx("path", { ...props }, index))) }));
+}
+
+module.exports = Symbol;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+/**
+ * Renders a platform system symbol as an SVG.
+ *
+ * @param symbol SF Symbols name used when `platform()` is `"macos"`.
+ * @param icon Segoe glyph used when `platform()` is `"windows"`.
+ * @param size Target icon size in CSS pixels. Defaults to `16`.
+ * @param props
+ */
+declare function Symbol({ symbol, icon, size, ...props }: Props): react.JSX.Element;
+interface Props extends SVGProps<SVGSVGElement> {
+    symbol: string;
+    icon: string;
+    size: number;
+}
+
+export { Symbol as default };

package/dist/index.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { platform } from '@tauri-apps/plugin-os';
+import { useState, useLayoutEffect } from 'react';
+import { getCachedSymbol, getSymbol } from 'tauri-plugin-system-symbols';
+
+/**
+ * Renders a platform system symbol as an SVG.
+ *
+ * @param symbol SF Symbols name used when `platform()` is `"macos"`.
+ * @param icon Segoe glyph used when `platform()` is `"windows"`.
+ * @param size Target icon size in CSS pixels. Defaults to `16`.
+ * @param props
+ */
+function Symbol({ symbol, icon, size, ...props }) {
+    const key = platform() === 'macos' ? symbol : icon;
+    const [current, setCurrent] = useState(() => ({ key, size, path: getCachedSymbol(key, size) }));
+    useLayoutEffect(() => {
+        if (current.key === key && current.size === size && current.path)
+            return;
+        let active = true;
+        getSymbol(key, size).then((path) => {
+            if (active)
+                setCurrent({ key, size, path });
+        });
+        return () => {
+            active = false;
+        };
+    }, [key, size]);
+    return (jsx("svg", { fill: "currentColor", height: size, viewBox: `0 0 ${size} ${size}`, width: size, "data-symbol": key, ...props, children: current.path?.map((props, index) => (jsx("path", { ...props }, index))) }));
+}
+
+export { Symbol as default };

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "tauri-plugin-system-symbols-react",
+  "version": "0.2.0",
+  "description": "React SVG components for tauri-plugin-system-symbols.",
+  "license": "MIT",
+  "author": "insd47",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/insd47/tauri-plugin-system-symbols-react.git"
+  },
+  "packageManager": "pnpm@10.24.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "check": "tsc --noEmit",
+    "prepack": "pnpm run build"
+  },
+  "peerDependencies": {
+    "@tauri-apps/plugin-os": "^2.3.2",
+    "react": ">=18",
+    "tauri-plugin-system-symbols": "^0.1.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@tauri-apps/plugin-os": "^2.3.2",
+    "@types/react": "^19.0.0",
+    "prettier": "^3.8.4",
+    "react": "^19.0.0",
+    "rollup": "^4.44.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "tauri-plugin-system-symbols": "file:../tauri-plugin-system-symbols",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
+  }
+}