convert system icons to outlines

2026-01-24 19:47:58 -05:00 · 2020-08-28 15:52:44 -04:00
parent 9b82eaf99b
commit 8407694cdd
33 changed files with 57 additions and 55 deletions
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -1832,7 +1832,7 @@ rows:
        view_type: cards
        view_options:
          cards:
-            icon: person
+            icon: account_circle
            title: '{{ first_name }} {{ last_name }}'
            subtitle: '{{ title }}'
            size: 4
--- a/app/src/assets/avatar-placeholder.svg
+++ b/app/src/assets/avatar-placeholder.svg
@@ -2,7 +2,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <g fill="none" fill-rule="evenodd">
    <path fill="#ECEFF1" d="M0 0h64v64H0z"/>
-    <path d="M32 32c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8zm0 4c-5.34 0-16 2.68-16 8v4h32v-4c0-5.32-10.66-8-16-8z" fill="#B0BEC5" fill-rule="nonzero"/>
-    <path d="M8 8h48v48H8z"/>
+	<path d="M32 12a20 20 0 100 40 20 20 0 000-40zm-9.86 32.56C23 42.76 28.24 41 32 41s9.02 1.76 9.86 3.56a15.8 15.8 0 01-19.72 0zm22.58-2.9C41.86 38.18 34.92 37 32 37s-9.86 1.18-12.72 4.66A16.02 16.02 0 1148 32a15.9 15.9 0 01-3.28 9.66zM32 20c-3.88 0-7 3.12-7 7s3.12 7 7 7 7-3.12 7-7-3.12-7-7-7zm0 10a3 3 0 110-6 3 3 0 010 6z" fill="#B0BEC5"/>
  </g>
 </svg>
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -14,7 +14,7 @@
 				</template>

 				<template #append>
-					<v-icon name="add_box" @click="toggle" />
+					<v-icon name="add_box" outline @click="toggle" />
 				</template>
 			</v-input>
 		</template>
--- a/app/src/components/v-icon/custom-icons/folder_move.vue
+++ b/app/src/components/v-icon/custom-icons/folder_move.vue
@@ -11,7 +11,7 @@
 		xmlns="http://www.w3.org/2000/svg"
 	>
 		<path
-			d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm.295 7l-5-5v2.852H11v4.296h4.295V18l5-5z"
+			d="M11.17 8l-2-2H4v12h16V8h-8.83zM4 4h6l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2l.01-12A2 2 0 014 4zm10.44 5l4 4-4 4v-3H11v-2h3.44V9z"
 		/>
 	</svg>
 </template>
--- a/app/src/components/v-info/v-info.vue
+++ b/app/src/components/v-info/v-info.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="v-info" :class="[type, { center }]">
 		<div class="icon">
-			<v-icon large :name="icon" />
+			<v-icon large :name="icon" outline />
 		</div>
 		<h2 class="title type-title">{{ title }}</h2>
 		<p class="content"><slot /></p>
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -2,11 +2,11 @@
 	<div class="cards-header">
 		<div class="start">
 			<div class="selected" v-if="_selection.length > 0" @click="_selection = []">
-				<v-icon name="cancel" />
+				<v-icon name="cancel" outline />
 				<span class="label">{{ $tc('n_items_selected', _selection.length) }}</span>
 			</div>
 			<button class="select-all" v-else @click="$emit('select-all')">
-				<v-icon name="check_circle" />
+				<v-icon name="check_circle" outline />
 				<span class="label">{{ $t('select_all') }}</span>
 			</button>
 		</div>
--- a/app/src/modules/collections/routes/browse/browse.vue
+++ b/app/src/modules/collections/routes/browse/browse.vue
@@ -49,7 +49,7 @@
 			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

@@ -75,7 +75,7 @@
 				:to="batchLink"
 				v-tooltip.bottom="$t('edit')"
 			>
-				<v-icon name="edit" />
+				<v-icon name="edit" outline />
 			</v-button>

 			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('create_item')">
--- a/app/src/modules/collections/routes/detail/detail.vue
+++ b/app/src/modules/collections/routes/detail/detail.vue
@@ -55,7 +55,7 @@
 						@click="on"
 						v-if="collectionInfo.meta.singleton === false"
 					>
-						<v-icon name="delete_forever" />
+						<v-icon name="delete_forever" outline />
 					</v-button>
 				</template>

@@ -84,7 +84,7 @@
 						@click="on"
 						v-if="collectionInfo.meta.singleton === false"
 					>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

--- a/app/src/modules/files/components/add-folder/add-folder.vue
+++ b/app/src/modules/files/components/add-folder/add-folder.vue
@@ -2,7 +2,7 @@
 	<v-dialog v-model="dialogActive">
 		<template #activator="{ on }">
 			<v-button rounded icon class="add-new" @click="on" v-tooltip.bottom="$t('create_folder')">
-				<v-icon name="create_new_folder" />
+				<v-icon name="create_new_folder" outline />
 			</v-button>
 		</template>

--- a/app/src/modules/files/components/folder-picker/folder-picker.vue
+++ b/app/src/modules/files/components/folder-picker/folder-picker.vue
@@ -12,7 +12,7 @@
 				>
 					<template #activator>
 						<v-list-item-icon>
-							<v-icon name="folder_special" />
+							<v-icon name="folder_special" outline />
 						</v-list-item-icon>
 						<v-list-item-content>{{ $t('file_library') }}</v-list-item-content>
 					</template>
--- a/app/src/modules/files/components/navigation/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation/navigation-folder.vue
@@ -41,7 +41,7 @@
 			<v-list dense>
 				<v-list-item @click="renameActive = true">
 					<v-list-item-icon>
-						<v-icon name="edit" />
+						<v-icon name="edit" outline />
 					</v-list-item-icon>
 					<v-list-item-content>
 						{{ $t('rename_folder') }}
@@ -57,7 +57,7 @@
 				</v-list-item>
 				<v-list-item @click="deleteActive = true">
 					<v-list-item-icon>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-list-item-icon>
 					<v-list-item-content>
 						{{ $t('delete_folder') }}
--- a/app/src/modules/files/components/navigation/navigation.vue
+++ b/app/src/modules/files/components/navigation/navigation.vue
@@ -11,7 +11,7 @@
 				<v-list-group to="/files" value="root" scope="files-navigation" exact disable-groupable-parent>
 					<template #activator>
 						<v-list-item-icon>
-							<v-icon name="folder_special" />
+							<v-icon name="folder_special" outline />
 						</v-list-item-icon>
 						<v-list-item-content>{{ $t('file_library') }}</v-list-item-content>
 					</template>
--- a/app/src/modules/files/routes/browse/browse.vue
+++ b/app/src/modules/files/routes/browse/browse.vue
@@ -6,7 +6,7 @@

 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
-				<v-icon name="folder" />
+				<v-icon name="folder" outline />
 			</v-button>
 		</template>

@@ -47,7 +47,7 @@
 			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

@@ -73,7 +73,7 @@
 				:to="batchLink"
 				v-tooltip.bottom="$t('edit')"
 			>
-				<v-icon name="edit" />
+				<v-icon name="edit" outline />
 			</v-button>

 			<v-button
--- a/app/src/modules/files/routes/detail/detail.vue
+++ b/app/src/modules/files/routes/detail/detail.vue
@@ -22,7 +22,7 @@
 						@click="on"
 						v-tooltip.bottom="$t('delete')"
 					>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

--- a/app/src/modules/settings/components/navigation/navigation.vue
+++ b/app/src/modules/settings/components/navigation/navigation.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-list nav>
 		<v-list-item v-for="item in navItems" :to="item.to" :key="item.to">
-			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
+			<v-list-item-icon><v-icon :name="item.icon" :outline="item.outline" /></v-list-item-icon>
 			<v-list-item-content>
 				<v-list-item-title>{{ item.name }}</v-list-item-title>
 			</v-list-item-content>
@@ -10,7 +10,7 @@
 		<v-divider />

 		<v-list-item v-for="item in externalItems" :href="item.href" :key="item.href">
-			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
+			<v-list-item-icon><v-icon :name="item.icon" :outline="item.outline" /></v-list-item-icon>
 			<v-list-item-content>
 				<v-list-item-title>{{ item.name }}</v-list-item-title>
 			</v-list-item-content>
@@ -45,17 +45,18 @@ export default defineComponent({
 				to: `/settings/data-model`,
 			},
 			{
-				icon: 'people',
+				icon: 'admin_panel_settings',
 				name: i18n.t('settings_permissions'),
 				to: `/settings/roles`,
+				outline: true,
 			},
 			{
-				icon: 'bookmark',
+				icon: 'bookmark_border',
 				name: i18n.t('settings_presets'),
 				to: `/settings/presets`,
 			},
 			{
-				icon: 'send',
+				icon: 'anchor',
 				name: i18n.t('settings_webhooks'),
 				to: `/settings/webhooks`,
 			},
@@ -66,11 +67,13 @@ export default defineComponent({
 				icon: 'bug_report',
 				name: i18n.t('report_bug'),
 				href: 'https://github.com/directus/directus/issues/new/choose',
+				outline: true,
 			},
 			{
 				icon: 'new_releases',
 				name: i18n.t('request_feature'),
 				href: 'https://github.com/directus/directus/discussions/new',
+				outline: true,
 			},
 		];

--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
@@ -28,7 +28,7 @@

 				<v-list-item @click="deleteActive = true">
 					<v-list-item-icon>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-list-item-icon>
 					<v-list-item-content>
 						{{ $t('delete_collection') }}
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
@@ -22,7 +22,7 @@

 			<v-list dense>
 				<v-list-item :to="`/settings/data-model/${field.collection}/${field.field}`">
-					<v-list-item-icon><v-icon name="edit" /></v-list-item-icon>
+					<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
 					<v-list-item-content>
 						{{ $t('edit_field') }}
 					</v-list-item-content>
@@ -60,7 +60,7 @@
 				</v-list-item>

 				<v-list-item @click="deleteActive = true">
-					<v-list-item-icon><v-icon name="delete" /></v-list-item-icon>
+					<v-list-item-icon><v-icon name="delete" outline /></v-list-item-icon>
 					<v-list-item-content>
 						{{ $t('delete_field') }}
 					</v-list-item-content>
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -18,7 +18,7 @@
 						@click="on"
 						v-tooltip.bottom="$t('delete_collection')"
 					>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

--- a/app/src/modules/settings/routes/presets/browse/browse.vue
+++ b/app/src/modules/settings/routes/presets/browse/browse.vue
@@ -4,7 +4,7 @@

 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
-				<v-icon name="bookmark" />
+				<v-icon name="bookmark_border" />
 			</v-button>
 		</template>

@@ -12,7 +12,7 @@
 			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

--- a/app/src/modules/settings/routes/presets/detail/detail.vue
+++ b/app/src/modules/settings/routes/presets/detail/detail.vue
@@ -22,7 +22,7 @@
 						@click="on"
 						v-tooltip.bottom="$t('delete')"
 					>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

--- a/app/src/modules/settings/routes/roles/browse/browse.vue
+++ b/app/src/modules/settings/routes/roles/browse/browse.vue
@@ -4,7 +4,7 @@

 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
-				<v-icon name="people" />
+				<v-icon name="admin_panel_settings" outline />
 			</v-button>
 		</template>

--- a/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-header.vue
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-header.vue
@@ -3,8 +3,8 @@
 		<span class="name">{{ $t('collection') }}</span>
 		<v-icon name="add" />
 		<v-icon name="visibility" />
-		<v-icon name="edit" />
-		<v-icon name="delete" />
+		<v-icon name="edit" outline />
+		<v-icon name="delete" outline />
 	</div>
 </template>

--- a/app/src/modules/settings/routes/roles/detail/detail.vue
+++ b/app/src/modules/settings/routes/roles/detail/detail.vue
@@ -25,7 +25,7 @@
 						@click="on"
 						v-tooltip.bottom="$t('delete')"
 					>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

--- a/app/src/modules/settings/routes/webhooks/browse/browse.vue
+++ b/app/src/modules/settings/routes/webhooks/browse/browse.vue
@@ -4,7 +4,7 @@

 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
-				<v-icon name="send" />
+				<v-icon name="anchor" />
 			</v-button>
 		</template>

@@ -17,7 +17,7 @@
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" v-if="selection.length > 0" @click="on">
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

@@ -36,7 +36,7 @@
 			</v-dialog>

 			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink">
-				<v-icon name="edit" />
+				<v-icon name="edit" outline />
 			</v-button>

 			<v-button rounded icon :to="addNewLink">
--- a/app/src/modules/settings/routes/webhooks/detail/detail.vue
+++ b/app/src/modules/settings/routes/webhooks/detail/detail.vue
@@ -12,7 +12,7 @@
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

--- a/app/src/modules/users/components/navigation/navigation.vue
+++ b/app/src/modules/users/components/navigation/navigation.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-list nav>
 		<v-list-item to="/users" exact :active="currentRole === null">
-			<v-list-item-icon><v-icon name="people" /></v-list-item-icon>
+			<v-list-item-icon><v-icon name="folder_shared" outline /></v-list-item-icon>
 			<v-list-item-content>{{ $t('all_users') }}</v-list-item-content>
 		</v-list-item>

@@ -20,7 +20,7 @@
 			exact
 			:active="currentRole === id"
 		>
-			<v-list-item-icon><v-icon :name="icon" /></v-list-item-icon>
+			<v-list-item-icon><v-icon :name="icon" outline /></v-list-item-icon>
 			<v-list-item-content>{{ name }}</v-list-item-content>
 		</v-list-item>
 	</v-list>
--- a/app/src/modules/users/index.ts
+++ b/app/src/modules/users/index.ts
@@ -6,7 +6,7 @@ import UsersDetail from './routes/detail/';
 export default defineModule(({ i18n }) => ({
 	id: 'users',
 	name: i18n.tc('user_directory'),
-	icon: 'people',
+	icon: 'people_alt',
 	routes: [
 		{
 			name: 'users-browse-all',
--- a/app/src/modules/users/routes/browse/browse.vue
+++ b/app/src/modules/users/routes/browse/browse.vue
@@ -6,7 +6,7 @@

 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
-				<v-icon name="people" />
+				<v-icon name="people_alt" outline />
 			</v-button>
 		</template>

@@ -20,7 +20,7 @@
 			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on">
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

@@ -46,7 +46,7 @@
 				:to="batchLink"
 				v-tooltip.bottom="$t('edit')"
 			>
-				<v-icon name="edit" />
+				<v-icon name="edit" outline />
 			</v-button>

 			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('create_user')">
@@ -81,7 +81,7 @@
 			</template>

 			<template #no-items>
-				<v-info :title="$tc('user_count', 0)" icon="people" center>
+				<v-info :title="$tc('user_count', 0)" icon="people_alt" center>
 					{{ $t('no_users_copy') }}

 					<template #append>
--- a/app/src/modules/users/routes/detail/detail.vue
+++ b/app/src/modules/users/routes/detail/detail.vue
@@ -21,7 +21,7 @@
 						@click="on"
 						v-tooltip.bottom="$t('delete')"
 					>
-						<v-icon name="delete" />
+						<v-icon name="delete" outline />
 					</v-button>
 				</template>

@@ -69,7 +69,7 @@
 				<div class="avatar">
 					<v-skeleton-loader v-if="loading || previewLoading" />
 					<img v-else-if="avatarSrc" :src="avatarSrc" :alt="item.first_name" />
-					<v-icon v-else name="person" x-large />
+					<v-icon v-else name="account_circle" outline x-large />
 				</div>
 				<div class="user-box-content">
 					<template v-if="loading">
--- a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
+++ b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
@@ -35,11 +35,11 @@

 				<v-list dense>
 					<v-list-item @click="$emit('edit')">
-						<v-list-item-icon><v-icon name="edit" /></v-list-item-icon>
+						<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
 						<v-list-item-content>{{ $t('edit') }}</v-list-item-content>
 					</v-list-item>
 					<v-list-item @click="confirmDelete = true">
-						<v-list-item-icon><v-icon name="delete" /></v-list-item-icon>
+						<v-list-item-icon><v-icon name="delete" outline /></v-list-item-icon>
 						<v-list-item-content>{{ $t('delete') }}</v-list-item-content>
 					</v-list-item>
 				</v-list>
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -29,7 +29,7 @@
 		<router-link :to="userProfileLink">
 			<v-avatar tile large v-tooltip.right="userFullName">
 				<img v-if="avatarURL" :src="avatarURL" :alt="userFullName" class="avatar-image" />
-				<v-icon v-else name="account_circle" />
+				<v-icon v-else name="account_circle" outline />
 			</v-avatar>
 		</router-link>
 	</v-hover>
--- a/app/src/views/private/components/module-bar/module-bar.vue
+++ b/app/src/views/private/components/module-bar/module-bar.vue
@@ -19,7 +19,7 @@
 						: null
 				"
 			>
-				<v-icon :name="module.icon" />
+				<v-icon :name="module.icon" outline />
 			</v-button>
 		</div>
 		<module-bar-avatar />
--- a/app/src/views/private/components/user-popover/user-popover.vue
+++ b/app/src/views/private/components/user-popover/user-popover.vue
@@ -18,7 +18,7 @@
 		<div class="user-box" v-else-if="data">
 			<v-avatar x-large class="avatar">
 				<img v-if="avatarSrc" :src="avatarSrc" :alt="data.first_name" />
-				<v-icon name="person" v-else />
+				<v-icon name="person" outline v-else />
 			</v-avatar>
 			<div class="data">
 				<div class="name type-title">{{ data.first_name }} {{ data.last_name }}</div>