feat(todomvc): add icons to example app

apps/todomvc/app.ts

@@ -11,12 +11,19 @@ import {
 } from './todo.service.ts';
 import { todoListControlsView } from './views/todo-list-controls.view.js';
 import { compose } from './utils.js';
+import { UIIcon } from './components/ui-icon.component';
 
 const connectWithView = compose([
   connectTodoService,
   withView<{ todoService: TodoService }, { state: TodoServiceState }>,
 ]);
 
+define('ui-icon', UIIcon, {
+  observedAttributes: ['name'],
+  shadow: {
+    mode: 'open',
+  },
+});
 define('app-todo', withView(TodoItemView), {
   shadow: { mode: 'open', delegatesFocus: true },
   observedAttributes: ['completed'],

apps/todomvc/components/ui-icon.component.js

@@ -0,0 +1,30 @@
+const template = document.createElement('template');
+template.innerHTML = `
+<style>
+:host {
+    display: inline-block;
+}
+svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+}
+</style>
+<svg>
+    <use id="use" xlink:href=""></use>
+</svg>
+`;
+
+const spriteURL = `/components/icons.svg`;
+
+export const UIIcon = function* ({ $host, $root }) {
+  $root.replaceChildren(template.content.cloneNode(true));
+  $root.querySelector('svg').setAttribute('aria-hidden', 'true');
+  while (true) {
+    const iconName = $host.getAttribute('name');
+    $root
+      .getElementById('use')
+      .setAttribute('xlink:href', `${spriteURL}#${iconName}`);
+    yield;
+  }
+};

apps/todomvc/index.html

@@ -21,7 +21,7 @@ <h1>Todo list app</h1>
           name="new-content"
           type="text"
         />
-        <button>Add +</button>
+        <button><ui-icon name="plus-circle"></ui-icon>add</button>
       </div>
     </form>
   </app-add-todo>

apps/todomvc/theme.css

@@ -65,6 +65,19 @@ h1 {
     font-size: 1.5em;
 }
 
+ui-icon {
+    --_size: var(--size, 1em);
+    aspect-ratio: 1 / 1;
+    display: inline-block;
+    width: var(--_size);
+    height: var(--_size);
+}
+
+:is(span, button, a):has(ui-icon:first-child) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
 
 input[type=text],
 button,
@@ -73,14 +86,15 @@ button,
     --_color: var(--color, var(--font-color));
     --_shadow-color: var(--shadow-color, lightgray);
     --_bg-color: var(--bg-color, var(--surface-bg));
+    --_font-size: var(--font-size, 0.9em);
 
     white-space: nowrap;
     border: 1px solid var(--_color);
     color: var(--_color);
     border-radius: 4px;
     box-shadow: 0 2px 2px 0 var(--_shadow-color);
     background: var(--_bg-color);
-    font-size: 0.9em;
+    font-size: var(--_font-size);
     padding: 0.3em;
 }
 
@@ -171,12 +185,11 @@ app-todo {
     grid-template-areas:
             "filter filter filter"
             "toggle-all info clear-all";
-    grid-template-columns: 100px 1fr 140px;
+    grid-template-columns: 100px 1fr 9em;
     gap: 0.5em;
     align-items: center;
     font-size: 0.8em;
 
-
     > fieldset {
         grid-area: filter;
         margin-inline: auto;

apps/todomvc/views/add-todo.view.ts

@@ -25,7 +25,7 @@ export const AddTodoView: ViewFactory<{ todoService: TodoService }> = ({
           name="new-content"
           type="text"
         />
-        <button>Add +</button>
+        <button><ui-icon name="plus-circle"></ui-icon>add</button>
       </div>
     </form>`;
 };

apps/todomvc/views/todo-item.view.ts

@@ -21,6 +21,10 @@ export const TodoItemView: ViewFactory = ({ html, $host }) => {
 
         #remove-button {
           --color: var(--danger-color, red);
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          --font-size: 0.8em;
         }
 
         label {
@@ -30,6 +34,13 @@ export const TodoItemView: ViewFactory = ({ html, $host }) => {
           align-items: center;
           gap: var(--_gap);
         }
+
+        ui-icon {
+          aspect-ratio: 1 / 1;
+          display: inline-block;
+          width: 1em;
+          height: 1em;
+        }
       </style>
       <label
         ><input
@@ -43,7 +54,7 @@ export const TodoItemView: ViewFactory = ({ html, $host }) => {
         </span>
       </label>
       <button id="remove-button" part="button" @click="${handleClick}">
-        X<span>Remove</span>
+        <ui-icon name="x-circle"></ui-icon><span>remove</span>
       </button>`;
 
   function dispatch(eventName) {

apps/todomvc/views/todo-list-controls.view.ts

@@ -65,6 +65,7 @@ export const todoListControlsView: ViewFactory<
                 id="clear-completed"
                 @click="${todoService.clearCompleted}"
               >
+                <ui-icon name="recycle"></ui-icon>
                 Clear completed
               </button>`
             : null} `