Merge pull request #731 from nextcloud/feature/precompile-all-svgs

Feature/precompile all svgs

packages/app/assets/logo.svg

@@ -1 +0,0 @@
-../../../assets/logo.svg

packages/app/lib/branding.dart

@@ -1,19 +1,21 @@
 import 'dart:ui';
 
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:neon/theme.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 
-final neonTheme = NeonTheme(
+const neonTheme = NeonTheme(
   branding: branding,
   colorScheme: colorScheme,
 );
 
-final branding = Branding(
+const branding = Branding(
   name: 'Nextcloud Neon',
-  logo: SvgPicture.asset(
+  logo: VectorGraphic(
-    'assets/logo.svg',
     width: 100,
     height: 100,
+    loader: AssetBytesLoader(
+      'assets/logo.svg.vec',
+    ),
   ),
   legalese: 'Copyright © 2023, provokateurin\nUnder GPLv3 license',
 );

packages/app/pubspec.lock

@@ -367,7 +367,7 @@ packages:
     source: hosted
     version: "2.0.16"
   flutter_svg:
-    dependency: "direct main"
+    dependency: transitive
     description:
       name: flutter_svg
       sha256: "8c5d68a82add3ca76d792f058b186a0599414f279f00ece4830b9b231b570338"
@@ -1232,7 +1232,7 @@ packages:
     source: hosted
     version: "3.0.7"
   vector_graphics:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: vector_graphics
       sha256: "670f6e07aca990b4a2bcdc08a784193c4ccdd1932620244c3a86bb72a0eac67f"

packages/app/pubspec.yaml

@@ -9,7 +9,6 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  flutter_svg: ^2.0.7
   neon:
     git:
       url: https://github.com/nextcloud/neon
@@ -30,6 +29,7 @@ dependencies:
     git:
       url: https://github.com/nextcloud/neon
       path: packages/neon/neon_notifications
+  vector_graphics: ^1.1.7
 
 dev_dependencies:
   flutter_material_design_icons: ^1.1.7296

packages/neon/neon/lib/src/models/app_implementation.dart

@@ -1,6 +1,5 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:go_router/go_router.dart';
 import 'package:meta/meta.dart';
 import 'package:neon/l10n/localizations.dart';
@@ -12,6 +11,7 @@ import 'package:neon/src/settings/models/storage.dart';
 import 'package:neon/src/widgets/drawer_destination.dart';
 import 'package:provider/provider.dart';
 import 'package:rxdart/rxdart.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 
 @immutable
 abstract class AppImplementation<T extends Bloc, R extends NextcloudAppOptions> {
@@ -95,13 +95,15 @@ abstract class AppImplementation<T extends Bloc, R extends NextcloudAppOptions>
     final Color? color,
   }) =>
       Builder(
-        builder: (final context) => SizedBox.fromSize(
+        builder: (final context) => VectorGraphic(
-          size: size,
+          width: size.width,
-          child: SvgPicture.asset(
+          height: size.height,
-            'assets/app.svg',
-            package: 'neon_$id',
           colorFilter: ColorFilter.mode(color ?? Theme.of(context).colorScheme.primary, BlendMode.srcIn),
+          loader: AssetBytesLoader(
+            'assets/app.svg.vec',
+            packageName: 'neon_$id',
           ),
+          semanticsLabel: AppLocalizations.of(context).nextcloudLogo,
         ),
       );
 

packages/neon/neon/lib/src/widgets/nextcloud_logo.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/widgets.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:neon/l10n/localizations.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 
 class NextcloudLogo extends StatelessWidget {
   const NextcloudLogo({
@@ -8,11 +8,13 @@ class NextcloudLogo extends StatelessWidget {
   });
 
   @override
-  Widget build(final BuildContext context) => SvgPicture.asset(
+  Widget build(final BuildContext context) => VectorGraphic(
-        'assets/logo_nextcloud.svg',
-        package: 'neon',
         width: 100,
         height: 100,
+        loader: const AssetBytesLoader(
+          'assets/logo_nextcloud.svg.vec',
+          packageName: 'neon',
+        ),
         semanticsLabel: AppLocalizations.of(context).nextcloudLogo,
       );
 }

packages/neon/neon_files/assets/app.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-folder" viewBox="0 0 24 24"><path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" fill="#f37736" /></svg>

packages/neon/neon_files/pubspec.yaml

@@ -39,6 +39,7 @@ dev_dependencies:
     git:
       url: https://github.com/nextcloud/neon
       path: packages/neon_lints
+  vector_graphics_compiler: ^1.1.7
 
 flutter:
   uses-material-design: true

packages/neon/neon_news/assets/app.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.0" viewBox="0 0 32 32">
- <path d="m3 2c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1h26c0.554 0 1-0.446 1-1v-2c0-0.554-0.446-1-1-1h-26zm0 8c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1h18c0.554 0 1-0.446 1-1v-2c0-0.554-0.446-1-1-1h-18zm0 8c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1h24c0.554 0 1-0.446 1-1v-2c0-0.554-0.446-1-1-1h-24zm0 8c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1h12c0.554 0 1-0.446 1-1v-2c0-0.554-0.446-1-1-1h-12z" fill="#f37736"/>
-</svg>

packages/neon/neon_news/pubspec.yaml

@@ -31,6 +31,7 @@ dev_dependencies:
     git:
       url: https://github.com/nextcloud/neon
       path: packages/neon_lints
+  vector_graphics_compiler: ^1.1.7
 
 flutter:
   uses-material-design: true

packages/neon/neon_notes/assets/app.svg

@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h24v24h-24z" fill="none"/><path d="m3 17.25v3.75h3.75l11.06-11.06-3.75-3.75zm17.71-10.21c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75z" fill="#f37736"/></svg>

packages/neon/neon_notes/pubspec.yaml

@@ -31,6 +31,7 @@ dev_dependencies:
     git:
       url: https://github.com/nextcloud/neon
       path: packages/neon_lints
+  vector_graphics_compiler: ^1.1.7
 
 flutter:
   uses-material-design: true

packages/neon/neon_notifications/assets/app.svg

@@ -1 +0,0 @@
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14 12.33V13H2v-.67L3.33 11V7a4.66 4.66 0 0 1 3.34-4.47v-.2A1.33 1.33 0 0 1 8 1a1.33 1.33 0 0 1 1.33 1.33v.2A4.66 4.66 0 0 1 12.67 7v4L14 12.33m-4.67 1.34A1.33 1.33 0 0 1 8 15a1.33 1.33 0 0 1-1.33-1.33" fill="#f37736"/></svg>

packages/neon/neon_notifications/pubspec.yaml

@@ -25,6 +25,7 @@ dev_dependencies:
     git:
       url: https://github.com/nextcloud/neon
       path: packages/neon_lints
+  vector_graphics_compiler: ^1.1.7
 
 flutter:
   uses-material-design: true

tool/generate-app.sh

@@ -1,40 +0,0 @@
-#!/bin/bash
-set -euxo pipefail
-cd "$(dirname "$0")/.."
-
-function export_mipmap_icon() {
-    source="$1"
-    name="$2"
-    size="$3"
-    dpi="$4"
-    inkscape "$source" -o "android/app/src/main/res/mipmap-${dpi}dpi/$name.png" -w "$size" -h "$size"
-}
-
-function export_mipmap_icon_all() {
-    source="$1"
-    name="$2"
-    export_mipmap_icon "$source" "$name" 72 h &
-    export_mipmap_icon "$source" "$name" 48 m &
-    export_mipmap_icon "$source" "$name" 96 xh &
-    export_mipmap_icon "$source" "$name" 144 xxh &
-    export_mipmap_icon "$source" "$name" 192 xxxh &
-    wait
-}
-
-(
-  cd packages/app
-
-  # Splash screens
-  inkscape assets/logo.svg -o img/splash_icon.png -w 768 -h 768 # 768px at xxxhdpi is 192dp
-  convert -size 1152x1152 xc:none img/splash_icon.png -gravity center -composite img/splash_icon_android_12.png # 1152px at xxxhdpi is 288dp
-  exiftool -overwrite_original -all= img/splash_icon_android_12.png # To remove timestamps
-
-  # Android launcher icons
-  export_mipmap_icon_all "assets/logo.svg" "ic_launcher" &
-  for id in files news notes notifications; do
-    export_mipmap_icon_all "../neon/neon_$id/assets/app.svg" "app_$id" &
-  done
-  wait
-
-  fvm dart run flutter_native_splash:create
-)

tool/generate-assets.sh

@@ -4,5 +4,100 @@ cd "$(dirname "$0")/.."
 
 color="#f37736"
 
+rm -rf /tmp/nextcloud-neon
+mkdir -p /tmp/nextcloud-neon
+
+function copy_app_svg() {
+  id="$1"
+  path="$2"
+  target="packages/neon/neon_$id/assets/app.svg"
+  if [ -f "$path/img/app.svg" ]; then
+    cp "$path/img/app.svg" "$target"
+  elif [ -f "$path/img/$id.svg" ]; then
+    cp "$path/img/$id.svg" "$target"
+  else
+    echo "Can not find icon for $id in $path"
+    exit 1
+  fi
+  sed -i "s/fill=\"#[^\"]*\"/fill=\"$color\"/g" "$target"
+}
+
+function export_mipmap_icon() {
+    source="$1"
+    name="$2"
+    size="$3"
+    dpi="$4"
+    inkscape "$source" -o "android/app/src/main/res/mipmap-${dpi}dpi/$name.png" -w "$size" -h "$size"
+}
+
+function export_mipmap_icon_all() {
+    source="$1"
+    name="$2"
+    export_mipmap_icon "$source" "$name" 72 h &
+    export_mipmap_icon "$source" "$name" 48 m &
+    export_mipmap_icon "$source" "$name" 96 xh &
+    export_mipmap_icon "$source" "$name" 144 xxh &
+    export_mipmap_icon "$source" "$name" 192 xxxh &
+    wait
+}
+
+function precompile_assets() {
+  fvm dart run vector_graphics_compiler --input-dir assets/
+  find assets/ -name "*.svg" -exec rm {} \;
+}
+
 wget https://raw.githubusercontent.com/Templarian/MaterialDesign/master/svg/cable-data.svg -O assets/logo.svg
 sed -i "s/<path /<path fill=\"$color\" /g" assets/logo.svg
+
+wget https://raw.githubusercontent.com/nextcloud/promo/master/nextcloud-logo-inverted.svg -O packages/neon/neon/assets/logo_nextcloud.svg
+
+icons_dir="packages/neon/neon/assets/icons/server/"
+rm -rf "$icons_dir"
+mkdir -p "$icons_dir"
+
+shopt -s extglob
+for file in external/nextcloud-server/{core/img/*,apps/*/img}/!(app|app-dark).svg; do
+  name="$(basename "$file" | sed "s/.svg$//" | sed "s/-dark$//" | sed "s/-white$//").svg"
+  if ! grep "<image " "$file"; then
+    cp -u "$file" "$icons_dir/$name"
+  fi
+done
+
+(
+  cd packages/neon/neon
+  precompile_assets
+)
+
+copy_app_svg files external/nextcloud-server/apps/files
+copy_app_svg news external/nextcloud-news
+copy_app_svg notes external/nextcloud-notes
+copy_app_svg notifications external/nextcloud-notifications
+
+(
+  cd packages/app
+
+  cp ../../assets/logo.svg assets/logo.svg
+
+  # Splash screens
+  inkscape assets/logo.svg -o img/splash_icon.png -w 768 -h 768 # 768px at xxxhdpi is 192dp
+  convert -size 1152x1152 xc:none img/splash_icon.png -gravity center -composite img/splash_icon_android_12.png # 1152px at xxxhdpi is 288dp
+  exiftool -overwrite_original -all= img/splash_icon_android_12.png # To remove timestamps
+
+  # Android launcher icons
+  export_mipmap_icon_all "assets/logo.svg" "ic_launcher" &
+  for path in ../neon/neon_*; do
+    export_mipmap_icon_all "$path/assets/app.svg" "app_$(basename "$path" | sed "s/^neon_//")" &
+  done
+  wait
+
+  fvm dart run flutter_native_splash:create
+
+  precompile_assets
+)
+
+for path in packages/neon/neon_*; do
+  (
+    cd "$path"
+    precompile_assets
+  )
+done

tool/generate-neon.sh

@@ -4,6 +4,11 @@ cd "$(dirname "$0")/.."
 
 color="#f37736"
 
+function precompile_assets() {
+  fvm dart run vector_graphics_compiler --input-dir assets/
+  find assets/ -name "*.svg" -exec rm {} \;
+}
+
 function copy_app_svg() {
   id="$1"
   path="$2"
@@ -17,6 +22,10 @@ function copy_app_svg() {
     exit 1
   fi
   sed -i "s/fill=\"#[^\"]*\"/fill=\"$color\"/g" "$target"
+  (
+    cd "packages/neon/neon_$id"
+    precompile_assets
+  )
 }
 
 rm -rf /tmp/nextcloud-neon
@@ -42,12 +51,11 @@ done
 (
   cd packages/neon/neon
 
-  fvm dart run vector_graphics_compiler --input-dir assets/icons/server
-  rm -rf assets/icons/server/*.svg
-
   # Nextcloud logo
   wget https://raw.githubusercontent.com/nextcloud/promo/master/nextcloud-logo-inverted.svg -O assets/logo_nextcloud.svg
 
+  precompile_assets
+
   melos run generate:neon:build_runner
   melos run generate:neon:l10n
 )