vrr/zed
2
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2026-08-23 16:04:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 14
zed/crates/icons
History
Exact
Oleksandr Kholiavko cdc537c690
csv_preview: Evolve into tabular data preview (#60768) 
# Objective

The MVP version of CSV preview is ready. However it's trivial to extend
it to TSV & other formats.

## Solution

This PR does exactly that - switching from CSV only to any tabular data
(TSV/CSV/PSV/SSV).
1. added `tsv`/`psv`/`ssv` support
2. renamed action/eye button & crate
3. added `.psv`/`.ssv` types to use database icon (similar to
`csv`/`tsv`)
2. Added `Table` svg icon (was previously missing) so preview is not
longer using book icon (from markdown preview).

> NOTE: Crate renaming will be done separately (as it's mechanical work
& I don't want to mix it with logic changes)

## Testing

Opened csv/tsv/psv/ssv files in peview

## Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

## Showcase

PSV/SSV file formats icon

| Before | After |
| --- | --- |
| <img width="141" height="136" alt="image"
src="https://github.com/user-attachments/assets/ff5ec1a2-10e3-4363-a467-d535c7f621c0"
/> | <img width="143" height="135" alt="image"
src="https://github.com/user-attachments/assets/f4a85276-beee-4d3e-bc59-319c4fc8812c"
/> |

Change namespace for actions (`csv` -> `tabular data`)

| Before | After |
| --- | --- |
| <img width="551" height="150" alt="image"
src="https://github.com/user-attachments/assets/f7b79a7f-b300-4d14-8565-b42b3bcb11c4"
/> | <img width="558" height="152" alt="image"
src="https://github.com/user-attachments/assets/be9dcc54-51a4-4736-9539-172fecabdf6d"
/> |


Update parser & detection logic to support preview for TSV/PSV/SSV

| Before | After |
| --- | --- |
| <img width="470" height="287" alt="image"
src="https://github.com/user-attachments/assets/d0222bd1-91a7-46e0-b4da-76be0642bf51"
/> | <img width="541" height="275" alt="image"
src="https://github.com/user-attachments/assets/3c4d237a-4956-46ad-b7d6-3a8782b41888"
/> |


Introduce table svg icon

| Before | After |
| --- | --- |
| <img width="349" height="66" alt="image"
src="https://github.com/user-attachments/assets/bd7999ef-516f-43d1-a0e6-50055c1c3bed"
/> | <img width="331" height="50" alt="image"
src="https://github.com/user-attachments/assets/fc534921-0c15-421c-b046-8c5967178d24"
/> |


---

Release Notes:

- N/A or Added/Fixed/Improved ...
2026-08-14 15:58:14 +00:00
..
src csv_preview: Evolve into tabular data preview (#60768) 2026-08-14 15:58:14 +00:00
Cargo.toml Remove workspace-hack (#40216) 2025-10-17 18:58:14 +00:00
LICENSE-GPL
README.md Include icon guidelines in PR templates and contribution docs (#58855) 2026-06-08 17:42:34 +00:00

README.md

Zed Icons

Guidelines

Icons are a big part of Zed, and they're how we convey hundreds of actions without relying on labeled buttons. When introducing a new icon, it's important to ensure consistency with the existing set, which follows these guidelines:

  1. The SVG view box should be 16x16.
  2. For outlined icons, use a 1.2px stroke width.
  3. Not all icons are mathematically aligned; there's quite a bit of optical adjustment. However, try to keep the icon within an internal 12x12 bounding box as much as possible while ensuring proper visibility.
  4. Use the filled and outlined terminology when introducing icons that will have these two variants.
  5. Icons that are deeply contextual may have the feature context as their name prefix. For example, ToolWeb, ReplPlay, DebugStepInto, etc.
  6. Avoid complex layer structures in the icon SVG, like clipping masks and similar elements. When the shape becomes too complex, we recommend running the SVG through SVGOMG to clean it up.

Sourcing

Most icons are created by sourcing them from Lucide. Then, they're modified, adjusted, cleaned up, and simplified depending on their use and overall fit with Zed.

Sometimes, we may use other sources like Phosphor, but we also design many icons completely from scratch.

Contributing

To introduce a new icon, add the .svg file to the assets/icon directory and then add its corresponding item to the icons.rs file within the crates directory.

  • SVG files in the assets folder follow a snake_case name format.
  • Icons in the icons.rs file follow the PascalCase name format.

Make sure to tag a member of Zed's design team (@zed-industries/design) so we can review and adjust any newly introduced icon.