Skip to content

Commit

Permalink
tool/icons: strip defs/g clip-paths from icon SVGs
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnemolland
arnemolland committed May 27, 2023
1 parent 474d701 commit 273b389
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 43 deletions.
Binary file modified lib/fonts/FlumeIcons.ttf
View file
Binary file not shown.
70 changes: 35 additions & 35 deletions lib/src/components/icons.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,41 +127,41 @@ class FlumeIcons {
static const search_filled = _FlumeIconsData(0xf167, 'search_filled');
static const search = _FlumeIconsData(0xf168, 'search');
static const settings_filled = _FlumeIconsData(0xf169, 'settings_filled');
static const settings = _FlumeIconsData(0xf16a, 'settings');
static const share = _FlumeIconsData(0xf16b, 'share');
static const shield = _FlumeIconsData(0xf16c, 'shield');
static const sign_out = _FlumeIconsData(0xf16d, 'sign_out');
static const skull = _FlumeIconsData(0xf16e, 'skull');
static const sort = _FlumeIconsData(0xf16f, 'sort');
static const spinner = _FlumeIconsData(0xf170, 'spinner');
static const star_filled = _FlumeIconsData(0xf171, 'star_filled');
static const star = _FlumeIconsData(0xf172, 'star');
static const stopwatch_filled = _FlumeIconsData(0xf173, 'stopwatch_filled');
static const stopwatch_full = _FlumeIconsData(0xf174, 'stopwatch_full');
static const stopwatch = _FlumeIconsData(0xf175, 'stopwatch');
static const strategy = _FlumeIconsData(0xf176, 'strategy');
static const subscription = _FlumeIconsData(0xf177, 'subscription');
static const swords_filled = _FlumeIconsData(0xf178, 'swords_filled');
static const swords = _FlumeIconsData(0xf179, 'swords');
static const tactic = _FlumeIconsData(0xf17a, 'tactic');
static const times_filled = _FlumeIconsData(0xf17b, 'times_filled');
static const times = _FlumeIconsData(0xf17c, 'times');
static const tools = _FlumeIconsData(0xf17d, 'tools');
static const trash = _FlumeIconsData(0xf17e, 'trash');
static const trophy_filled = _FlumeIconsData(0xf17f, 'trophy_filled');
static const trophy = _FlumeIconsData(0xf180, 'trophy');
static const twitch = _FlumeIconsData(0xf181, 'twitch');
static const twitter = _FlumeIconsData(0xf182, 'twitter');
static const upload = _FlumeIconsData(0xf183, 'upload');
static const user_filled = _FlumeIconsData(0xf184, 'user_filled');
static const user = _FlumeIconsData(0xf185, 'user');
static const users_filled = _FlumeIconsData(0xf186, 'users_filled');
static const users = _FlumeIconsData(0xf187, 'users');
static const videos_filled = _FlumeIconsData(0xf188, 'videos_filled');
static const videos = _FlumeIconsData(0xf189, 'videos');
static const warning_filled = _FlumeIconsData(0xf18a, 'warning_filled');
static const warning = _FlumeIconsData(0xf18b, 'warning');
static const youtube = _FlumeIconsData(0xf18c, 'youtube');
static const settings = _FlumeIconsData(0xf16b, 'settings');
static const share = _FlumeIconsData(0xf16c, 'share');
static const shield = _FlumeIconsData(0xf16d, 'shield');
static const sign_out = _FlumeIconsData(0xf16e, 'sign_out');
static const skull = _FlumeIconsData(0xf16f, 'skull');
static const sort = _FlumeIconsData(0xf170, 'sort');
static const spinner = _FlumeIconsData(0xf171, 'spinner');
static const star_filled = _FlumeIconsData(0xf172, 'star_filled');
static const star = _FlumeIconsData(0xf173, 'star');
static const stopwatch_filled = _FlumeIconsData(0xf174, 'stopwatch_filled');
static const stopwatch_full = _FlumeIconsData(0xf175, 'stopwatch_full');
static const stopwatch = _FlumeIconsData(0xf176, 'stopwatch');
static const strategy = _FlumeIconsData(0xf177, 'strategy');
static const subscription = _FlumeIconsData(0xf178, 'subscription');
static const swords_filled = _FlumeIconsData(0xf179, 'swords_filled');
static const swords = _FlumeIconsData(0xf17a, 'swords');
static const tactic = _FlumeIconsData(0xf17b, 'tactic');
static const times_filled = _FlumeIconsData(0xf17c, 'times_filled');
static const times = _FlumeIconsData(0xf17d, 'times');
static const tools = _FlumeIconsData(0xf17e, 'tools');
static const trash = _FlumeIconsData(0xf17f, 'trash');
static const trophy_filled = _FlumeIconsData(0xf180, 'trophy_filled');
static const trophy = _FlumeIconsData(0xf181, 'trophy');
static const twitch = _FlumeIconsData(0xf182, 'twitch');
static const twitter = _FlumeIconsData(0xf183, 'twitter');
static const upload = _FlumeIconsData(0xf184, 'upload');
static const user_filled = _FlumeIconsData(0xf185, 'user_filled');
static const user = _FlumeIconsData(0xf186, 'user');
static const users_filled = _FlumeIconsData(0xf187, 'users_filled');
static const users = _FlumeIconsData(0xf188, 'users');
static const videos_filled = _FlumeIconsData(0xf189, 'videos_filled');
static const videos = _FlumeIconsData(0xf18a, 'videos');
static const warning_filled = _FlumeIconsData(0xf18b, 'warning_filled');
static const warning = _FlumeIconsData(0xf18c, 'warning');
static const youtube = _FlumeIconsData(0xf18d, 'youtube');

static const all = <String, _FlumeIconsData>{
'apple': apple,
Expand Down
12 changes: 8 additions & 4 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,15 @@ dev_dependencies:
sdk: flutter

flutter_lints: ^2.0.1
figma: ^5.0.3
figma: ^6.0.0
progress_bar: ^1.0.0
http: ^0.13.5
test: ^1.24.0
args: ^2.4.0
http: ^1.0.0
test:
args: ^2.4.1
xml: ^6.3.0

dependency_overrides:
collection: ^1.17.2

flutter:
assets:
Expand Down
46 changes: 42 additions & 4 deletions tool/icons.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'package:args/args.dart';
import 'package:figma/figma.dart';
import 'package:http/http.dart';
import 'package:progress_bar/progress_bar.dart';
import 'package:xml/xml.dart';

/// {@category Tools}
/// {@subCategory Figma}
Expand Down Expand Up @@ -47,10 +48,12 @@ Future<void> optimize(Directory dir) async {

// Loop through SVG files and optimize them.
for (final element in list.where(isSvgFile)) {
svgoFutures.add(
Process.run('svgo', ['-i', element.path, '-o', element.path])
.then((_) => bar.tick()),
);
svgoFutures
.add(Process.run('svgo', ['-i', element.path, '-o', element.path]).then(
(_) => stripDefs(element).then(
(_) => bar.tick(),
),
));
}

// Execute SVGO in parallel.
Expand All @@ -62,6 +65,41 @@ Future<void> optimize(Directory dir) async {
});
}

Future<void> stripDefs(FileSystemEntity fe) async {
// Read file and parse with XmlDocument.
final file = File(fe.path);
final contents = await file.readAsString();
final doc = XmlDocument.parse(contents);

// Remove all <defs> elements along with their children.
for (final def in doc.findAllElements('defs')) {
def.remove();
}

// Remove all <g> elements but keep their children.
for (final g in doc.findAllElements('g')) {
// find parent of <g> element.
var parent = g.parent ?? doc;
final children = g.children;

// Remove <g> element.
g.remove();

// Add children to parent.
for (int i = 0; i < children.length; i++) {
final child = children[i];
if (child.hasParent) {
// Remove from parent
child.remove();
}
parent.children.add(child);
}
}

// Write optimized SVG back to file.
await file.writeAsString(doc.toXmlString(pretty: true));
}

/// {@category Tools}
/// {@subCategory Figma}
/// Downloads all icons from Figma and saves them to the given directory.
Expand Down

1 comment on commit 273b389

@vercel
Copy link

@vercel vercel bot commented on 273b389 May 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flume-mobile – ./

flume-mobile.vercel.app
flume-mobile-git-main-gameflow-tv.vercel.app
flume.gameflow.dev
flume-mobile-gameflow-tv.vercel.app

Please sign in to comment.