mirror of
https://github.com/getpaseo/paseo.git
synced 2026-07-29 12:01:31 +00:00
c40e1f03db
Each doc verified against current code; stale claims fixed in place. - architecture: handshake/binary-frame/route/module-table corrections - data-model: atomic-write claim narrowed, missing daemon files/fields added - development: db:query removed (SQLite/Drizzle gone), tmux→concurrently+portless, PASEO_HOME split - unistyles: withUnistyles(Icon) is the dominant pattern; new Animated.View+dynamic-styles iOS gotcha - SECURITY: bearer-token auth, DNS-rebinding allowlist semantics, ephemeral phone keypair, wire format - glossary: Project-checkout rename has shipped - providers: claude-acp not built-in, Pi/mock, async isCommandAvailable, interface drift - coding-standards: rewritten as compressed /unslop adaptation - product/release/testing/custom-providers/android/mobile-testing/ad-hoc-daemon-testing/file-icons/design: smaller corrections
111 lines
4.8 KiB
Markdown
111 lines
4.8 KiB
Markdown
# File Icons
|
|
|
|
The file explorer uses colored SVG icons from [`material-icon-theme`](https://github.com/material-extensions/vscode-material-icon-theme) (installed as a dev dependency in `packages/app`).
|
|
|
|
Icons are inlined as SVG strings in:
|
|
|
|
```
|
|
packages/app/src/components/material-file-icons.ts
|
|
```
|
|
|
|
This file is auto-generated. Do not edit it by hand.
|
|
|
|
## How it works
|
|
|
|
- `SVG_ICONS` maps icon names (e.g. `"typescript"`) to raw SVG strings
|
|
- `EXTENSION_TO_ICON` maps file extensions (e.g. `"ts"`) to icon names
|
|
- `getFileIconSvg(fileName)` returns the SVG string for a given filename, falling back to a generic file icon
|
|
- `packages/app/src/components/file-explorer-pane.tsx` is the only consumer; it renders the SVG with `SvgXml` from `react-native-svg`
|
|
|
|
## Adding a new icon
|
|
|
|
1. Find the icon name in the material-icon-theme manifest:
|
|
|
|
```bash
|
|
node -e "
|
|
const m = require('./node_modules/material-icon-theme/dist/material-icons.json');
|
|
console.log('fileExtensions:', m.fileExtensions['YOUR_EXT']);
|
|
console.log('languageIds:', m.languageIds['YOUR_LANG']);
|
|
"
|
|
```
|
|
|
|
2. Verify the SVG exists:
|
|
|
|
```bash
|
|
cat node_modules/material-icon-theme/icons/ICON_NAME.svg
|
|
```
|
|
|
|
3. Add two things to `material-file-icons.ts`:
|
|
- The SVG string in `SVG_ICONS`:
|
|
|
|
```ts
|
|
"icon_name": `<svg ...>...</svg>`,
|
|
```
|
|
|
|
- The extension mapping in `EXTENSION_TO_ICON`:
|
|
```ts
|
|
"ext": "icon_name",
|
|
```
|
|
|
|
4. Run `npm run typecheck` to verify.
|
|
|
|
## Currently included icons
|
|
|
|
53 unique icons covering these extensions:
|
|
|
|
| Extension(s) | Icon |
|
|
| ------------------------------------------ | ----------- |
|
|
| `ts` | typescript |
|
|
| `tsx` | react_ts |
|
|
| `js` | javascript |
|
|
| `jsx` | react |
|
|
| `py` | python |
|
|
| `go` | go |
|
|
| `rs` | rust |
|
|
| `rb` | ruby |
|
|
| `java` | java |
|
|
| `kt` | kotlin |
|
|
| `c` | c |
|
|
| `cpp` | cpp |
|
|
| `h` | h |
|
|
| `hpp` | hpp |
|
|
| `cs` | csharp |
|
|
| `swift` | swift |
|
|
| `dart` | dart |
|
|
| `ex`, `exs` | elixir |
|
|
| `erl` | erlang |
|
|
| `hs` | haskell |
|
|
| `clj` | clojure |
|
|
| `scala` | scala |
|
|
| `ml` | ocaml |
|
|
| `r` | r |
|
|
| `lua` | lua |
|
|
| `zig` | zig |
|
|
| `nix` | nix |
|
|
| `php` | php |
|
|
| `html` | html |
|
|
| `css` | css |
|
|
| `scss` | sass |
|
|
| `less` | less |
|
|
| `json` | json |
|
|
| `yml`, `yaml` | yaml |
|
|
| `xml` | xml |
|
|
| `toml` | toml |
|
|
| `md`, `markdown` | markdown |
|
|
| `sql` | database |
|
|
| `graphql`, `gql` | graphql |
|
|
| `sh`, `bash` | console |
|
|
| `tf` | terraform |
|
|
| `hcl` | hcl |
|
|
| `vue` | vue |
|
|
| `svelte` | svelte |
|
|
| `astro` | astro |
|
|
| `wasm` | webassembly |
|
|
| `svg` | svg |
|
|
| `png`, `jpg`, `jpeg`, `gif`, `webp`, `ico` | image |
|
|
| `txt` | document |
|
|
| `conf`, `cfg`, `ini` | settings |
|
|
| `lock` | lock |
|
|
| `groovy` | groovy |
|
|
| `gradle` | gradle |
|