website/components/Base/Icon.vue at 54ea1d79a6fefbab2babf44707c053abe2cc75b4 · directus/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<script setup lang="ts">
export interface BaseIconProps {
	/**
	 * Name of the Material Symbol to use.
	 * @see https://icones.js.org/collection/material-symbols for all available icons
	 */
	name: string;

	/**
	 * Size of the icon. Controls font size and dimensions.
	 * @values small, medium, large
	 */
	size?: 'x-small' | 'small' | 'medium' | 'large';

	/**
	 * Weight of the icon. Similar to font-weight
	 * @values 100, 200, 300, 400, 500, 600, 700
	 */
	weight?: number;
}

const props = withDefaults(defineProps<BaseIconProps>(), {
	size: 'medium',
	weight: 400,
});

const filledIcons = [
	'all_inclusive',
	'apartment',
	'api',
	'api',
	'arrow_back',
	'arrow_forward',
	'arrow_outward',
	'autopay',
	'autostop',
	'avg_pace',
	'cached',
	'check',
	'checklist',
	'checklist_rtl',
	'close',
	'cloudy',
	'code',
	'compare_arrows',
	'cruelty_free',
	'dynamic_feed',
	'electrical_services',
	'emoji_people',
	'expand_less',
	'expand_more',
	'full_stacked_bar_chart',
	'functions',
	'globe_uk',
	'home_app_logo',
	'horizontal_rule',
	'laps',
	'link',
	'image_search',
	'insights',
	'login',
	'menu_rounded',
	'money_off',
	'monitoring',
	'online_prediction',
	'open_in_new',
	'password',
	'partner_exchange',
	'post_add',
	'public',
	'published_with_changes',
	'query_stats',
	'repeat',
	'search',
	'security',
	'sort_by_alpha',
	'sports_martial_arts',
	'support',
	'sync_alt',
	'timeline',
	'translate',
	'trending_up',
	'update',
	'webhook',
	'work',
	'support_agent',
];

const iconName = computed(() => {
	if (!props.name) return;
	// Convert the icon coming from the API to the name of the icon component
	// Directus uses Google Material Icons and the icon values are snake_case (e.g. "account_circle")
	const prefix = 'material-symbols:';
	// Change snake case to kebab case
	const kebabCase = props.name.replace(/_/g, '-');
	// If the icon is one of the filled icons, do not add the suffix '-outline'. Needed because of descrepancies between the Google Material Font we use in Directus icon interface and the Iconify library.
	const iconName = prefix + kebabCase + (filledIcons.includes(props.name) ? '' : '-outline');
	return iconName;
});
</script>

<template>
	<span v-if="iconName" class="base-icon" :class="size">
		<Icon :name="iconName" />
	</span>
</template>

<style lang="scss" scoped>
.base-icon {
	--base-icon-color: var(--foreground);
	color: var(--base-icon-color);
	display: inline-block;
}

.x-small {
	height: 16px;
	width: 16px;
	font-size: 16px;
}

.small {
	height: 20px;
	width: 20px;
	font-size: 20px;
}

.medium {
	height: 24px;
	width: 24px;
	font-size: 24px;
}

.large {
	height: 48px;
	width: 48px;
	font-size: 48px;
}
</style>