[PR #3145] [MERGED] [chore] svg improvements #5598

New issue

Closed

opened 2026-03-23 22:19:27 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:19:27 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/3145
Author: @a-wallen
Created: 8/8/2023
Status: ✅ Merged
Merged: 8/14/2023
Merged by: @a-wallen

Base: main ← Head: svg_improvements

📝 Commits (10+)

c26e9fd chore: remove use of svgWidget()
28e6aaa refactor: redundant code in svg
1674735 feat: add generator to generate flowy_svgs.g.dart
979026a chore: reference new package in pubspec
9886eae chore: remove svg widget from flowy_infra
8feb601 refactor: update usage in flowy_infra_ui
921b3c9 refactor: usage in appflowy_flutter
f348b2d fix: error with script not running
f9c51d5 fix: error with script not running
52be2e1 fix: use unix style file path

📊 Changes

334 files changed (+1627 additions, -768 deletions)

View changed files

📝 frontend/.vscode/tasks.json (+35 -18)
📝 frontend/appflowy_flutter/.gitignore (+1 -0)
➖ frontend/appflowy_flutter/assets/images/common/archive.svg (+0 -10)
➖ frontend/appflowy_flutter/assets/images/common/information.svg (+0 -5)
➖ frontend/appflowy_flutter/assets/images/common/open_folder.svg (+0 -3)
➖ frontend/appflowy_flutter/assets/images/common/recover.svg (+0 -4)
➖ frontend/appflowy_flutter/assets/images/common/settings.svg (+0 -4)
➖ frontend/appflowy_flutter/assets/images/editor/Favorite/active.svg (+0 -3)
➖ frontend/appflowy_flutter/assets/images/editor/calendar.svg (+0 -7)
➖ frontend/appflowy_flutter/assets/images/editor/delete.svg (+0 -6)
➖ frontend/appflowy_flutter/assets/images/editor/duplicate.svg (+0 -4)
➖ frontend/appflowy_flutter/assets/images/editor/editor_check.svg (+0 -4)
➖ frontend/appflowy_flutter/assets/images/editor/insert_emoticon.svg (+0 -6)
➖ frontend/appflowy_flutter/assets/images/editor/insert_emoticon_2.svg (+0 -6)
➖ frontend/appflowy_flutter/assets/images/editor/link.svg (+0 -4)
➖ frontend/appflowy_flutter/assets/images/editor/math.svg (+0 -1)
➖ frontend/appflowy_flutter/assets/images/editor/option.svg (+0 -8)
➖ frontend/appflowy_flutter/assets/images/file_icon.jpg (+0 -0)
➖ frontend/appflowy_flutter/assets/images/file_icon.svg (+0 -4)
➖ frontend/appflowy_flutter/assets/images/folder.svg (+0 -5)

...and 80 more files

📄 Description

Feature Preview

This is modeled based on Flutter's Icon widget and IconData.

I don't particularly appreciate having to check the assets folder to figure out the path for an SVG before I use it with the SVG widget. This PR introduces a new package called flowy_svg that crawls assets/images for the SVGs and generates a file called flowy_svgs.g.dart. It looks something like this:

// DO NOT EDIT. This code is generated by the flowy_svg script

// import the widget with from this package
import 'package:flowy_svg/flowy_svg.dart';

// export as convenience to the programmer
export 'package:flowy_svg/flowy_svg.dart';

/// A class to easily list all the svgs in the app
class FlowySvgs {

  static const archive = FlowySvgData('/assets/images/common/archive.svg')
  static const information = FlowySvgData('/assets/images/common/information.svg')
  /// etc...
}

When a contributor wants to use an SVG widget they can find what's available using FlowySvgs. (the dot will use intellisense to show all available SVGs)

We can still use a string for the asset path like so:

I grabbed some code from easy_localizations, a package we already use. The generated file will be output to lib/generated.

I'll create and register a script with all the other generation tasks like Generate Freezed and Generate Language files.

To do

Fix the script so that it can find dart:ui
Create a shell and cmd script to call into flowy_svg (similar to Generate Freezed) and register it in tasks.json.
Make unit tests pass.

PR Checklist

My code adheres to the AppFlowy Style Guide
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/3145 **Author:** [@a-wallen](https://github.com/a-wallen) **Created:** 8/8/2023 **Status:** ✅ Merged **Merged:** 8/14/2023 **Merged by:** [@a-wallen](https://github.com/a-wallen) **Base:** `main` ← **Head:** `svg_improvements` --- ### 📝 Commits (10+) - [`c26e9fd`](https://github.com/AppFlowy-IO/AppFlowy/commit/c26e9fd5ca13f3ddf9d78bb0a330c93090b8466b) chore: remove use of svgWidget() - [`28e6aaa`](https://github.com/AppFlowy-IO/AppFlowy/commit/28e6aaa26d2bcd8e27e71dd3d5f7c5716520ac13) refactor: redundant code in svg - [`1674735`](https://github.com/AppFlowy-IO/AppFlowy/commit/1674735101518c24dce226c57a8e25ae0c71a2eb) feat: add generator to generate flowy_svgs.g.dart - [`979026a`](https://github.com/AppFlowy-IO/AppFlowy/commit/979026a50bdb28207891bdc3f1b4df1124748538) chore: reference new package in pubspec - [`9886eae`](https://github.com/AppFlowy-IO/AppFlowy/commit/9886eae76bfbe830539a70933c79e7429875b1ee) chore: remove svg widget from flowy_infra - [`8feb601`](https://github.com/AppFlowy-IO/AppFlowy/commit/8feb6018c70a9ef60ef3929791fbc1de3ad7f86a) refactor: update usage in flowy_infra_ui - [`921b3c9`](https://github.com/AppFlowy-IO/AppFlowy/commit/921b3c9edae1e2d8a81f6b6b44b9a659f4f3dc65) refactor: usage in appflowy_flutter - [`f348b2d`](https://github.com/AppFlowy-IO/AppFlowy/commit/f348b2d03e0e8fc35d83c78cf798056f930acee1) fix: error with script not running - [`f9c51d5`](https://github.com/AppFlowy-IO/AppFlowy/commit/f9c51d5f19ffe8d1f70de2e4c848d091a6b76f23) fix: error with script not running - [`52be2e1`](https://github.com/AppFlowy-IO/AppFlowy/commit/52be2e14cb26ef3e19b99794047a28636b5e0a86) fix: use unix style file path ### 📊 Changes **334 files changed** (+1627 additions, -768 deletions) <details> <summary>View changed files</summary> 📝 `frontend/.vscode/tasks.json` (+35 -18) 📝 `frontend/appflowy_flutter/.gitignore` (+1 -0) ➖ `frontend/appflowy_flutter/assets/images/common/archive.svg` (+0 -10) ➖ `frontend/appflowy_flutter/assets/images/common/information.svg` (+0 -5) ➖ `frontend/appflowy_flutter/assets/images/common/open_folder.svg` (+0 -3) ➖ `frontend/appflowy_flutter/assets/images/common/recover.svg` (+0 -4) ➖ `frontend/appflowy_flutter/assets/images/common/settings.svg` (+0 -4) ➖ `frontend/appflowy_flutter/assets/images/editor/Favorite/active.svg` (+0 -3) ➖ `frontend/appflowy_flutter/assets/images/editor/calendar.svg` (+0 -7) ➖ `frontend/appflowy_flutter/assets/images/editor/delete.svg` (+0 -6) ➖ `frontend/appflowy_flutter/assets/images/editor/duplicate.svg` (+0 -4) ➖ `frontend/appflowy_flutter/assets/images/editor/editor_check.svg` (+0 -4) ➖ `frontend/appflowy_flutter/assets/images/editor/insert_emoticon.svg` (+0 -6) ➖ `frontend/appflowy_flutter/assets/images/editor/insert_emoticon_2.svg` (+0 -6) ➖ `frontend/appflowy_flutter/assets/images/editor/link.svg` (+0 -4) ➖ `frontend/appflowy_flutter/assets/images/editor/math.svg` (+0 -1) ➖ `frontend/appflowy_flutter/assets/images/editor/option.svg` (+0 -8) ➖ `frontend/appflowy_flutter/assets/images/file_icon.jpg` (+0 -0) ➖ `frontend/appflowy_flutter/assets/images/file_icon.svg` (+0 -4) ➖ `frontend/appflowy_flutter/assets/images/folder.svg` (+0 -5) _...and 80 more files_ </details> ### 📄 Description   ### Feature Preview This is modeled based on Flutter's `Icon` widget and `IconData`. I don't particularly appreciate having to check the assets folder to figure out the path for an SVG before I use it with the SVG widget. This PR introduces a new package called `flowy_svg` that crawls `assets/images` for the SVGs and generates a file called `flowy_svgs.g.dart`. It looks something like this: ```dart // DO NOT EDIT. This code is generated by the flowy_svg script // import the widget with from this package import 'package:flowy_svg/flowy_svg.dart'; // export as convenience to the programmer export 'package:flowy_svg/flowy_svg.dart'; /// A class to easily list all the svgs in the app class FlowySvgs { static const archive = FlowySvgData('/assets/images/common/archive.svg') static const information = FlowySvgData('/assets/images/common/information.svg') /// etc... } ``` When a contributor wants to use an SVG widget they can find what's available using `FlowySvgs.` (the dot will use intellisense to show all available SVGs) ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/44445638/79278c88-faa0-4bdc-a42e-550e4a919af7) We can still use a string for the asset path like so: ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/44445638/d24b7cf3-aed4-4cce-adf4-1a211d619a49) I grabbed some code from `easy_localizations`, a package we already use. The generated file will be output to `lib/generated`. I'll create and register a script with all the other generation tasks like `Generate Freezed` and `Generate Language` files. To do - [x] Fix the script so that it can find `dart:ui` - [x] Create a shell and cmd script to call into `flowy_svg` (similar to `Generate Freezed`) and register it in tasks.json. - [ ] Make unit tests pass.  ---  #### PR Checklist - [x] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides) - [ ] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>