bold, italic, underline icons #11

src/_icons/bold.svg

@@ -0,0 +1,6 @@
+---
+---
+<svg>
+  <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
+  <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+</svg>

src/_icons/italic.svg

@@ -0,0 +1,7 @@
+---
+---
+<svg>
+  <line x1="11" y1="5" x2="17" y2="5" />
+  <line x1="7" y1="19" x2="13" y2="19" />
+  <line x1="14" y1="5" x2="10" y2="19" />
+</svg>

src/_icons/plane-arrival.svg

@@ -1,5 +1,5 @@
 ---
 ---
 <svg>
-  <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(26.5 12 12)"/>
+  <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(26.5 12 12)" />
 </svg>

src/_icons/plane-departure.svg

@@ -1,5 +1,5 @@
 ---
 ---
 <svg>
-  <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(-26.5 12 12)"/>
+  <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(-26.5 12 12)" />
 </svg>

src/_icons/underline.svg

@@ -0,0 +1,6 @@
+---
+---
+<svg>
+  <line x1="7" y1="19" x2="17" y2="19" />
+  <path d="M8 5v6a4 4 0 0 0 8 0v-6" />
+</svg>

src/editor.html

@@ -1,6 +1,10 @@
 ---
 layout: default
 ---
+
+{% assign toolbar = 'bold,italic,underline|align-left,align-center,align-right,align-justified|list,list-check' | split: '|' %}
+
+
 <div class="container">
 	<div class="box">
 
@@ -69,6 +73,19 @@ layout: default
 			</div>
 		</div>
 
+		<div class="mb">
+			<div class="toolbar">
+				{% for group in toolbar %}
+				{% assign buttons = group | split: ',' %}
+				<div class="buttons">
+					{% for button in buttons %}
+					<div class="button js-icon" data-icon="{{ name }}">{% include icon.html name=button %}</div>
+					{% endfor %}
+				</div>
+				{% endfor %}
+			</div>
+		</div>
+
 		<h2 class="icon-subtitle">{{ site.icons.size }} icons</h2>
 
 		<div class="mb">

src/style.scss

@@ -395,3 +395,34 @@ Components
 .td-1 {
   width: 1%;
 }
+
+$border-color: #e0e0e0;
+
+.toolbar {
+  display: flex;
+}
+
+.buttons {
+  display: flex;
+  margin-right: .5rem;
+  border: 1px solid $border-color;
+  border-radius: 3px;
+
+  .button + .button {
+    border-left: 1px solid $border-color;
+  }
+}
+
+.button {
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  color: mix($dark, #fff, 75%);
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}