From 23b9baa05946fc65514480a646f5594504b78a6f Mon Sep 17 00:00:00 2001 From: Matt Hook Date: Wed, 20 Jul 2022 10:50:30 +1200 Subject: [PATCH] feat(icons): add more svg icons and other tweaks [EE-3721] (#7270) --- app/assets/ico/arrow-right-long.svg | 3 + app/assets/ico/arrows-updown.svg | 3 + app/assets/ico/asterisk.svg | 3 + app/assets/ico/bomb.svg | 5 + app/assets/ico/circle-notch.svg | 3 + app/assets/ico/clock-rewind.svg | 3 + app/assets/ico/compress.svg | 3 + app/assets/ico/dataflow-1.svg | 3 + app/assets/ico/dataflow-2.svg | 3 + app/assets/ico/expand.svg | 3 + app/assets/ico/file-code.svg | 3 + app/assets/ico/file-signature.svg | 3 + app/assets/ico/file-upload.svg | 3 + app/assets/ico/flask.svg | 3 + .../{icons/git-logo.svg => ico/git.svg} | 2 +- app/assets/ico/hacker.svg | 5 + app/assets/ico/heartbeat.svg | 3 + app/assets/ico/laptop-code.svg | 4 + app/assets/ico/laptop.svg | 3 + app/assets/ico/magic-wand.svg | 3 + app/assets/ico/memory.svg | 3 + app/assets/ico/microsoft.svg | 6 - app/assets/ico/object-group.svg | 3 + app/assets/ico/palette.svg | 6 + app/assets/ico/placeholder.svg | 5 + app/assets/ico/plug.svg | 3 + app/assets/ico/restore-window.svg | 3 + app/assets/ico/restore.svg | 3 + app/assets/ico/rocket.svg | 3 + app/assets/ico/route.svg | 3 + app/assets/ico/share.svg | 3 + app/assets/ico/sort.svg | 3 + app/assets/ico/tachometer.svg | 3 + app/assets/ico/tag-2.svg | 3 + app/assets/ico/tags.svg | 3 + app/assets/ico/template.svg | 4 + app/assets/ico/tools.svg | 3 + app/assets/ico/upload.svg | 4 + app/assets/ico/url.svg | 4 + app/assets/ico/user-circle.svg | 3 + app/assets/ico/user-lock.svg | 5 + app/portainer/components/BoxSelector/utils.ts | 5 +- .../oauth-options.tsx | 2 +- .../views/settings/authentication/options.tsx | 2 +- app/react/components/Svg.tsx | 111 ++++++++++++++++-- 45 files changed, 240 insertions(+), 20 deletions(-) create mode 100644 app/assets/ico/arrow-right-long.svg create mode 100644 app/assets/ico/arrows-updown.svg create mode 100644 app/assets/ico/asterisk.svg create mode 100644 app/assets/ico/bomb.svg create mode 100644 app/assets/ico/circle-notch.svg create mode 100644 app/assets/ico/clock-rewind.svg create mode 100644 app/assets/ico/compress.svg create mode 100644 app/assets/ico/dataflow-1.svg create mode 100644 app/assets/ico/dataflow-2.svg create mode 100644 app/assets/ico/expand.svg create mode 100644 app/assets/ico/file-code.svg create mode 100644 app/assets/ico/file-signature.svg create mode 100644 app/assets/ico/file-upload.svg create mode 100644 app/assets/ico/flask.svg rename app/assets/{icons/git-logo.svg => ico/git.svg} (94%) create mode 100644 app/assets/ico/hacker.svg create mode 100644 app/assets/ico/heartbeat.svg create mode 100644 app/assets/ico/laptop-code.svg create mode 100644 app/assets/ico/laptop.svg create mode 100644 app/assets/ico/magic-wand.svg create mode 100644 app/assets/ico/memory.svg delete mode 100644 app/assets/ico/microsoft.svg create mode 100644 app/assets/ico/object-group.svg create mode 100644 app/assets/ico/palette.svg create mode 100644 app/assets/ico/placeholder.svg create mode 100644 app/assets/ico/plug.svg create mode 100644 app/assets/ico/restore-window.svg create mode 100644 app/assets/ico/restore.svg create mode 100644 app/assets/ico/rocket.svg create mode 100644 app/assets/ico/route.svg create mode 100644 app/assets/ico/share.svg create mode 100644 app/assets/ico/sort.svg create mode 100644 app/assets/ico/tachometer.svg create mode 100644 app/assets/ico/tag-2.svg create mode 100644 app/assets/ico/tags.svg create mode 100644 app/assets/ico/template.svg create mode 100644 app/assets/ico/tools.svg create mode 100644 app/assets/ico/upload.svg create mode 100644 app/assets/ico/url.svg create mode 100644 app/assets/ico/user-circle.svg create mode 100644 app/assets/ico/user-lock.svg diff --git a/app/assets/ico/arrow-right-long.svg b/app/assets/ico/arrow-right-long.svg new file mode 100644 index 000000000..2187c8cc8 --- /dev/null +++ b/app/assets/ico/arrow-right-long.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/arrows-updown.svg b/app/assets/ico/arrows-updown.svg new file mode 100644 index 000000000..2c1e338e7 --- /dev/null +++ b/app/assets/ico/arrows-updown.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/asterisk.svg b/app/assets/ico/asterisk.svg new file mode 100644 index 000000000..6fae4e393 --- /dev/null +++ b/app/assets/ico/asterisk.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/bomb.svg b/app/assets/ico/bomb.svg new file mode 100644 index 000000000..f37412fe1 --- /dev/null +++ b/app/assets/ico/bomb.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/ico/circle-notch.svg b/app/assets/ico/circle-notch.svg new file mode 100644 index 000000000..cda549053 --- /dev/null +++ b/app/assets/ico/circle-notch.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/clock-rewind.svg b/app/assets/ico/clock-rewind.svg new file mode 100644 index 000000000..ab343c445 --- /dev/null +++ b/app/assets/ico/clock-rewind.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/compress.svg b/app/assets/ico/compress.svg new file mode 100644 index 000000000..4141bb1a2 --- /dev/null +++ b/app/assets/ico/compress.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/dataflow-1.svg b/app/assets/ico/dataflow-1.svg new file mode 100644 index 000000000..2513bad3f --- /dev/null +++ b/app/assets/ico/dataflow-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/dataflow-2.svg b/app/assets/ico/dataflow-2.svg new file mode 100644 index 000000000..a209ee2d7 --- /dev/null +++ b/app/assets/ico/dataflow-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/expand.svg b/app/assets/ico/expand.svg new file mode 100644 index 000000000..e80c83dc2 --- /dev/null +++ b/app/assets/ico/expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/file-code.svg b/app/assets/ico/file-code.svg new file mode 100644 index 000000000..5aef486dc --- /dev/null +++ b/app/assets/ico/file-code.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/file-signature.svg b/app/assets/ico/file-signature.svg new file mode 100644 index 000000000..0d23dec00 --- /dev/null +++ b/app/assets/ico/file-signature.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/file-upload.svg b/app/assets/ico/file-upload.svg new file mode 100644 index 000000000..e684fcb61 --- /dev/null +++ b/app/assets/ico/file-upload.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/flask.svg b/app/assets/ico/flask.svg new file mode 100644 index 000000000..3083c8f9a --- /dev/null +++ b/app/assets/ico/flask.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/git-logo.svg b/app/assets/ico/git.svg similarity index 94% rename from app/assets/icons/git-logo.svg rename to app/assets/ico/git.svg index 0ff160fa9..32e300e44 100644 --- a/app/assets/icons/git-logo.svg +++ b/app/assets/ico/git.svg @@ -1,3 +1,3 @@ - + diff --git a/app/assets/ico/hacker.svg b/app/assets/ico/hacker.svg new file mode 100644 index 000000000..cc469c7aa --- /dev/null +++ b/app/assets/ico/hacker.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/ico/heartbeat.svg b/app/assets/ico/heartbeat.svg new file mode 100644 index 000000000..832fa75bb --- /dev/null +++ b/app/assets/ico/heartbeat.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/laptop-code.svg b/app/assets/ico/laptop-code.svg new file mode 100644 index 000000000..0523bd4f2 --- /dev/null +++ b/app/assets/ico/laptop-code.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/ico/laptop.svg b/app/assets/ico/laptop.svg new file mode 100644 index 000000000..38a427f6e --- /dev/null +++ b/app/assets/ico/laptop.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/magic-wand.svg b/app/assets/ico/magic-wand.svg new file mode 100644 index 000000000..720a3420a --- /dev/null +++ b/app/assets/ico/magic-wand.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/memory.svg b/app/assets/ico/memory.svg new file mode 100644 index 000000000..02239685a --- /dev/null +++ b/app/assets/ico/memory.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/microsoft.svg b/app/assets/ico/microsoft.svg deleted file mode 100644 index d98b1d29d..000000000 --- a/app/assets/ico/microsoft.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/app/assets/ico/object-group.svg b/app/assets/ico/object-group.svg new file mode 100644 index 000000000..31d6ab27a --- /dev/null +++ b/app/assets/ico/object-group.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/palette.svg b/app/assets/ico/palette.svg new file mode 100644 index 000000000..0cc5445b7 --- /dev/null +++ b/app/assets/ico/palette.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/assets/ico/placeholder.svg b/app/assets/ico/placeholder.svg new file mode 100644 index 000000000..af02c964f --- /dev/null +++ b/app/assets/ico/placeholder.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/ico/plug.svg b/app/assets/ico/plug.svg new file mode 100644 index 000000000..a1b0c3d61 --- /dev/null +++ b/app/assets/ico/plug.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/restore-window.svg b/app/assets/ico/restore-window.svg new file mode 100644 index 000000000..32167f42d --- /dev/null +++ b/app/assets/ico/restore-window.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/restore.svg b/app/assets/ico/restore.svg new file mode 100644 index 000000000..ecb60fec2 --- /dev/null +++ b/app/assets/ico/restore.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/rocket.svg b/app/assets/ico/rocket.svg new file mode 100644 index 000000000..5048b7f31 --- /dev/null +++ b/app/assets/ico/rocket.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/route.svg b/app/assets/ico/route.svg new file mode 100644 index 000000000..45e637677 --- /dev/null +++ b/app/assets/ico/route.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/share.svg b/app/assets/ico/share.svg new file mode 100644 index 000000000..a63e76834 --- /dev/null +++ b/app/assets/ico/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/sort.svg b/app/assets/ico/sort.svg new file mode 100644 index 000000000..2a768c76c --- /dev/null +++ b/app/assets/ico/sort.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/tachometer.svg b/app/assets/ico/tachometer.svg new file mode 100644 index 000000000..6de37c58e --- /dev/null +++ b/app/assets/ico/tachometer.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/tag-2.svg b/app/assets/ico/tag-2.svg new file mode 100644 index 000000000..20fa123a6 --- /dev/null +++ b/app/assets/ico/tag-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/tags.svg b/app/assets/ico/tags.svg new file mode 100644 index 000000000..6edfc7862 --- /dev/null +++ b/app/assets/ico/tags.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/template.svg b/app/assets/ico/template.svg new file mode 100644 index 000000000..3664c6fd3 --- /dev/null +++ b/app/assets/ico/template.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/ico/tools.svg b/app/assets/ico/tools.svg new file mode 100644 index 000000000..23d0995fe --- /dev/null +++ b/app/assets/ico/tools.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/upload.svg b/app/assets/ico/upload.svg new file mode 100644 index 000000000..77d1d11ac --- /dev/null +++ b/app/assets/ico/upload.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/ico/url.svg b/app/assets/ico/url.svg new file mode 100644 index 000000000..d248e4e80 --- /dev/null +++ b/app/assets/ico/url.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/ico/user-circle.svg b/app/assets/ico/user-circle.svg new file mode 100644 index 000000000..075cbfe34 --- /dev/null +++ b/app/assets/ico/user-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/ico/user-lock.svg b/app/assets/ico/user-lock.svg new file mode 100644 index 000000000..1b191f7dd --- /dev/null +++ b/app/assets/ico/user-lock.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/portainer/components/BoxSelector/utils.ts b/app/portainer/components/BoxSelector/utils.ts index e444df69e..97524780c 100644 --- a/app/portainer/components/BoxSelector/utils.ts +++ b/app/portainer/components/BoxSelector/utils.ts @@ -8,7 +8,8 @@ export function buildOption( label: string, description: string, value: T, - feature?: FeatureId + feature?: FeatureId, + featherIcon?: boolean ): BoxSelectorOption { - return { id, icon, label, description, value, feature }; + return { id, icon, label, description, value, feature, featherIcon }; } diff --git a/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx b/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx index 15c9687fb..f33bb95d2 100644 --- a/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx +++ b/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx @@ -1,5 +1,5 @@ import { FeatureId } from '@/portainer/feature-flags/enums'; -import Microsoft from '@/assets/ico/microsoft.svg?c'; +import Microsoft from '@/assets/ico/vendor/microsoft.svg?c'; import Google from '@/assets/ico/vendor/google.svg?c'; import Github from '@/assets/ico/vendor/github.svg?c'; import Custom from '@/assets/ico/custom.svg?c'; diff --git a/app/portainer/views/settings/authentication/options.tsx b/app/portainer/views/settings/authentication/options.tsx index 9aedeb05b..496955c85 100644 --- a/app/portainer/views/settings/authentication/options.tsx +++ b/app/portainer/views/settings/authentication/options.tsx @@ -1,5 +1,5 @@ import { FeatureId } from '@/portainer/feature-flags/enums'; -import Microsoft from '@/assets/ico/microsoft.svg?c'; +import Microsoft from '@/assets/ico/vendor/microsoft.svg?c'; import Ldap from '@/assets/ico/ldap.svg?c'; import Oauth from '@/assets/ico/oauth.svg?c'; diff --git a/app/react/components/Svg.tsx b/app/react/components/Svg.tsx index cb2156838..a04989432 100644 --- a/app/react/components/Svg.tsx +++ b/app/react/components/Svg.tsx @@ -1,8 +1,52 @@ -import lightmode from '@/assets/ico/theme/lightmode.svg?c'; -import darkmode from '@/assets/ico/theme/darkmode.svg?c'; -import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c'; +// theme icons import automode from '@/assets/ico/theme/auto.svg?c'; -import git from '@/assets/icons/git-logo.svg?c'; +import darkmode from '@/assets/ico/theme/darkmode.svg?c'; +import lightmode from '@/assets/ico/theme/lightmode.svg?c'; +import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c'; +// general icons +import arrowsupdown from '@/assets/ico/arrows-updown.svg?c'; +import arrowright from '@/assets/ico/arrow-right-long.svg?c'; +import bomb from '@/assets/ico/bomb.svg?c'; +import checked from '@/assets/ico/checked.svg?c'; +import circlenotch from '@/assets/ico/circle-notch.svg?c'; +import clockrewind from '@/assets/ico/clock-rewind.svg?c'; +import compress from '@/assets/ico/compress.svg?c'; +import custom from '@/assets/ico/custom.svg?c'; +import dataflow from '@/assets/ico/dataflow-1.svg?c'; +import dataflow2 from '@/assets/ico/dataflow-2.svg?c'; +import expand from '@/assets/ico/expand.svg?c'; +import filecode from '@/assets/ico/file-code.svg?c'; +import filesignature from '@/assets/ico/file-signature.svg?c'; +import fileupload from '@/assets/ico/file-upload.svg?c'; +import flask from '@/assets/ico/flask.svg?c'; +import git from '@/assets/ico/git.svg?c'; +import hacker from '@/assets/ico/hacker.svg?c'; +import heartbeat from '@/assets/ico/heartbeat.svg?c'; +import laptop from '@/assets/ico/laptop.svg?c'; +import laptopcode from '@/assets/ico/laptop-code.svg?c'; +import ldap from '@/assets/ico/ldap.svg?c'; +import magicwand from '@/assets/ico/magic-wand.svg?c'; +import memory from '@/assets/ico/memory.svg?c'; +import objectgroup from '@/assets/ico/object-group.svg?c'; +import palette from '@/assets/ico/palette.svg?c'; +import plug from '@/assets/ico/plug.svg?c'; +import restore from '@/assets/ico/restore.svg?c'; +import restorewindow from '@/assets/ico/restore-window.svg?c'; +import rocket from '@/assets/ico/rocket.svg?c'; +import route from '@/assets/ico/route.svg?c'; +import share from '@/assets/ico/share.svg?c'; +import sort from '@/assets/ico/sort.svg?c'; +import tachometer from '@/assets/ico/tachometer.svg?c'; +import template from '@/assets/ico/template.svg?c'; +import tag from '@/assets/ico/tag-2.svg?c'; +import tag2 from '@/assets/ico/tags.svg?c'; +import tools from '@/assets/ico/tools.svg?c'; +import upload from '@/assets/ico/upload.svg?c'; +import url from '@/assets/ico/url.svg?c'; +import usercircle from '@/assets/ico/user-circle.svg?c'; +import userlock from '@/assets/ico/user-lock.svg?c'; +import Placeholder from '@/assets/ico/placeholder.svg?c'; // Placeholder is used when an icon name cant be matched +// vendor icons import aws from '@/assets/ico/vendor/aws.svg?c'; import azure from '@/assets/ico/vendor/azure.svg?c'; import civo from '@/assets/ico/vendor/civo.svg?c'; @@ -23,14 +67,54 @@ import proget from '@/assets/ico/vendor/proget.svg?c'; import quay from '@/assets/ico/vendor/quay.svg?c'; export const SvgIcons = { - lightmode, - darkmode, - highcontrastmode, automode, + darkmode, + lightmode, + highcontrastmode, + dataflow, + dataflow2, + arrowsupdown, + arrowright, + bomb, + checked, + circlenotch, + clockrewind, + compress, + custom, + expand, + filecode, + filesignature, + fileupload, + flask, git, + hacker, + heartbeat, + laptop, + laptopcode, + ldap, + magicwand, + memory, + objectgroup, + palette, + plug, + restore, + restorewindow, + rocket, + route, + share, + sort, + tachometer, + template, + tag, + tag2, + tools, + upload, + url, + usercircle, + userlock, aws, - civo, azure, + civo, digitalocean, docker, dockercompose, @@ -55,8 +139,17 @@ interface SvgProps { function Svg({ icon, className }: SvgProps) { const SvgIcon = SvgIcons[icon]; + + if (!SvgIcon) { + return ( + + ); + } + return ( - + );