Add BaseIcon (#11)

* Start on base-icon

* Finalize base-icon

* Tweak class name

components/src/base-icon/base-icon.story.md

@@ -0,0 +1,15 @@
+See [Material Symbols](https://fonts.google.com/icons) for all available icons.
+
+### Props
+
+| Prop     | Description                               |
+| -------- | ----------------------------------------- |
+| `name`   | Name of the Material Symbol to render     |
+| `size`   | Standardized font-size and optical weight |
+| `weight` | Number between 100 (thin) and 700 (bold)  |
+
+### Style Overrides
+
+| Variable            | Default             |
+| ------------------- | ------------------- |
+| `--base-icon-color` | `var(--foreground)` |

components/src/base-icon/base-icon.story.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import BaseIcon from './base-icon.vue';
+
+const state = reactive({
+	name: 'search',
+	weight: 500,
+	size: 'medium' as 'small' | 'medium' | 'large',
+});
+</script>
+
+<template>
+	<Story title="Base / Icon" auto-props-disabled>
+		<template #controls>
+			<HstText v-model="state.name" title="Name" />
+			<HstSlider v-model="state.weight" :step="100" :min="100" :max="700" title="Weight" />
+			<HstSelect
+				v-model="state.size"
+				title="Size"
+				:options="{
+					small: 'Small',
+					medium: 'Medium',
+					large: 'Large',
+				}"
+			/>
+		</template>
+
+		<BaseIcon :name="state.name" :weight="state.weight" :size="state.size" />
+	</Story>
+</template>

components/src/base-icon/base-icon.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, unref } from 'vue';
+
+export interface BaseIconProps {
+	name: string;
+	size?: 'small' | 'medium' | 'large';
+	weight?: number;
+}
+
+const props = withDefaults(defineProps<BaseIconProps>(), {
+	size: 'medium',
+	weight: 500,
+});
+
+const opticalSize = computed(() => {
+	switch (props.size) {
+		case 'small':
+			return 20;
+		case 'medium':
+		default:
+			return 24;
+		case 'large':
+			return 48;
+	}
+});
+
+const fontSize = computed(() => unref(opticalSize) + 'px');
+</script>
+
+<template>
+	<span class="base-icon" :class="size">{{ name }}</span>
+</template>
+
+<style scoped>
+.base-icon {
+	--base-icon-color: var(--foreground);
+
+	color: var(--base-icon-color);
+	font-family: 'Material Symbols Outlined';
+	font-weight: normal;
+	font-style: normal;
+	display: inline-block;
+	line-height: 1;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+	font-size: v-bind(fontSize);
+	font-variation-settings: 'opsz' v-bind(opticalSize), 'wght' v-bind(weight);
+	user-select: none;
+}
+</style>

components/src/theme/main.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;700&family=Poppins:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;700&family=Poppins:wght@600&family=Material+Symbols+Outlined:opsz,[email protected],100..700&display=swap');
 
 :root {
 	--family-display: 'Poppins', sans-serif;