style: modify toolbar style.

jaywcjlove · jaywcjlove · commit 629378850d56 · 2022-09-03T18:10:42.000+08:00
diff --git a/src/commands/fullscreen.tsx b/src/commands/fullscreen.tsx
@@ -65,15 +65,8 @@ export const fullscreen: ICommand = {
   keyCommand: 'fullscreen',
   button: (command, props, opts) => <Fullscreen command={command} editorProps={{ ...props, ...opts }} />,
   icon: (
-    <svg width="16" height="16" viewBox="0 0 1024 1024">
-      <path
-        fill="currentColor"
-        d="M189.75 428.89a36.87 36.87 0 0 0 36.84-36.85V228.12h164a36.85 36.85 0 1 0 0-73.7H189.75a36.82 36.82 0 0 0-36.8 36.85v200.8a36.83 36.83 0 0 0 36.8 36.82zM834.26 595.06a36.82 36.82 0 0 0-36.8 36.84v164H633.41a36.85 36.85 0 0 0 0 73.7h200.85a36.87 36.87 0 0 0 36.84-36.85V631.9a36.86 36.86 0 0 0-36.84-36.84zM797.46 228.12v179.31a36.82 36.82 0 1 0 73.64 0V191.24a36.86 36.86 0 0 0-36.84-36.85H602.33a36.85 36.85 0 0 0 0 73.7zM421.62 795.9H226.54V616.56a36.82 36.82 0 1 0-73.64 0v216.19a36.83 36.83 0 0 0 36.85 36.85h231.87a36.85 36.85 0 0 0 0-73.7z"
-      />
-      <path
-        fill="currentColor"
-        d="M306.5 307.94m32.95 0l345.1 0q32.95 0 32.95 32.95l0 342.22q0 32.95-32.95 32.95l-345.1 0q-32.95 0-32.95-32.95l0-342.22q0-32.95 32.95-32.95Z"
-      />
+    <svg fill="currentColor" viewBox="0 0 448 512" height="15" width="15">
+      <path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32s-14.3-32-32-32zm288 0h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64c0-17.69-14.3-32-32-32zM128 416H64v-64c0-17.69-14.31-32-32-32S0 334.31 0 352v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32s-14.3-32-32-32zm288-96c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96c0-17.7-14.3-32-32-32z" />
     </svg>
   ),
 };
diff --git a/src/commands/header.tsx b/src/commands/header.tsx
@@ -5,11 +5,8 @@ export const header: ICommand = {
   keyCommand: 'header',
   button: { 'aria-label': 'Add header text' },
   icon: (
-    <svg width="12" height="12" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z"
-      />
+    <svg fill="currentColor" viewBox="0 0 448 512" height="13" width="13">
+      <path d="M448 448c0 17.69-14.33 32-32 32h-96c-17.67 0-32-14.31-32-32s14.33-32 32-32h16V272H112v144h16c17.67 0 32 14.31 32 32s-14.33 32-32 32H32c-17.67 0-32-14.31-32-32s14.33-32 32-32h16V96H32C14.33 96 0 81.69 0 64s14.33-32 32-32h96c17.67 0 32 14.31 32 32s-14.33 32-32 32h-16v112h224V96h-16c-17.67 0-32-14.31-32-32s14.33-32 32-32h96c17.67 0 32 14.31 32 32s-14.33 32-32 32h-16v320h16c17.7 0 32 14.3 32 32z" />
     </svg>
   ),
   execute: ({ state, view }) => {
diff --git a/src/commands/image.tsx b/src/commands/image.tsx
@@ -6,10 +6,10 @@ export const image: ICommand = {
   keyCommand: 'image',
   button: { 'aria-label': 'Add image text' },
   icon: (
-    <svg viewBox="0 0 512 512" height="16" width="16">
+    <svg fill="currentColor" viewBox="0 0 16 16" height="14" width="14">
       <path
-        fill="currentColor"
-        d="M447.1 32h-384C28.64 32-.01 60.65-.01 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96c.01-35.35-27.79-64-63.99-64zm-336 64c26.51 0 48 21.49 48 48s-20.6 48-48 48-48-21.49-48-48 22.38-48 48-48zm335 311.6c-2.8 5.2-8.2 8.4-14.1 8.4H82.01a15.993 15.993 0 0 1-14.26-8.75 16 16 0 0 1 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51 93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192c3.29 4.875 3.59 11.175.79 16.475z"
+        fill-rule="evenodd"
+        d="M1.75 2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h.94a.76.76 0 0 1 .03-.03l6.077-6.078a1.75 1.75 0 0 1 2.412-.06L14.5 10.31V2.75a.25.25 0 0 0-.25-.25H1.75zm12.5 11H4.81l5.048-5.047a.25.25 0 0 1 .344-.009l4.298 3.889v.917a.25.25 0 0 1-.25.25zm1.75-.25V2.75A1.75 1.75 0 0 0 14.25 1H1.75A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25zM5.5 6a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM7 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
       />
     </svg>
   ),
diff --git a/src/commands/italic.tsx b/src/commands/italic.tsx
@@ -6,7 +6,7 @@ export const italic: ICommand = {
   keyCommand: 'italic',
   button: { 'aria-label': 'Add italic text' },
   icon: (
-    <svg width="12" height="12" viewBox="0 0 320 512">
+    <svg width="13" height="13" viewBox="0 0 320 512">
       <path
         fill="currentColor"
         d="M204.758 416h-33.849l62.092-320h40.725a16 16 0 0 0 15.704-12.937l6.242-32C297.599 41.184 290.034 32 279.968 32H120.235a16 16 0 0 0-15.704 12.937l-6.242 32C96.362 86.816 103.927 96 113.993 96h33.846l-62.09 320H46.278a16 16 0 0 0-15.704 12.935l-6.245 32C22.402 470.815 29.967 480 40.034 480h158.479a16 16 0 0 0 15.704-12.935l6.245-32c1.927-9.88-5.638-19.065-15.704-19.065z"
diff --git a/src/commands/link.tsx b/src/commands/link.tsx
@@ -6,11 +6,8 @@ export const link: ICommand = {
   keyCommand: 'link',
   button: { 'aria-label': 'Add link text' },
   icon: (
-    <svg viewBox="0 0 640 512" height="16" width="16">
-      <path
-        fill="currentColor"
-        d="M172.5 131.1c55.6-55.59 148-55.59 203.6 0 50 50 57.4 129.7 16.3 187.2l-1.1 1.6c-10.3 14.3-30.3 17.7-44.6 7.4-14.4-10.3-17.8-30.3-7.5-44.6l1.1-1.6c22.9-32.1 19.3-76-8.6-103.9-31.4-31.4-82.5-31.4-114 0L105.5 289.5c-31.51 30.6-31.51 82.5 0 114 27.8 27.9 71.8 31.5 103.8 8.6l1.6-2c14.4-9.4 34.4-6.1 44.6 8.3 10.3 14.4 7 34.4-7.4 44.7l-1.6 1.1c-58.4 41.1-136.3 34.5-186.29-15.4-56.469-56.5-56.469-148.1 0-204.5L172.5 131.1zm295 248.9c-56.5 56.5-148 56.5-204.5 0-50-50-56.5-128.8-15.4-186.3l1.1-1.6c9.4-14.3 29.4-17.7 44.6-7.4 14.4 9.4 17.8 29.4 7.5 44.6l-1.1 1.6c-22.9 31.2-19.3 76 8.6 103.9 31.4 31.4 82.5 31.4 114 0l112.2-112.3c31.5-31.5 31.5-83.4 0-114-27.8-27.87-71.8-31.51-103.8-8.6l-1.6 1.1c-14.4 10.3-34.4 6.1-44.6-7.42-10.3-14.38-7-34.37 7.4-44.64l1.6-1.12C451 6.731 529.8 13.25 579.8 63.24c56.5 56.46 56.5 148.06 0 204.46L467.5 380z"
-      />
+    <svg fill="currentColor" viewBox="0 0 640 512" height="16" width="16">
+      <path d="M172.5 131.1c55.6-55.59 148-55.59 203.6 0 50 50 57.4 129.7 16.3 187.2l-1.1 1.6c-10.3 14.3-30.3 17.7-44.6 7.4-14.4-10.3-17.8-30.3-7.5-44.6l1.1-1.6c22.9-32.1 19.3-76-8.6-103.9-31.4-31.4-82.5-31.4-114 0L105.5 289.5c-31.51 30.6-31.51 82.5 0 114 27.8 27.9 71.8 31.5 103.8 8.6l1.6-2c14.4-9.4 34.4-6.1 44.6 8.3 10.3 14.4 7 34.4-7.4 44.7l-1.6 1.1c-58.4 41.1-136.3 34.5-186.29-15.4-56.469-56.5-56.469-148.1 0-204.5L172.5 131.1zm295 248.9c-56.5 56.5-148 56.5-204.5 0-50-50-56.5-128.8-15.4-186.3l1.1-1.6c9.4-14.3 29.4-17.7 44.6-7.4 14.4 9.4 17.8 29.4 7.5 44.6l-1.1 1.6c-22.9 31.2-19.3 76 8.6 103.9 31.4 31.4 82.5 31.4 114 0l112.2-112.3c31.5-31.5 31.5-83.4 0-114-27.8-27.87-71.8-31.51-103.8-8.6l-1.6 1.1c-14.4 10.3-34.4 6.1-44.6-7.42-10.3-14.38-7-34.37 7.4-44.64l1.6-1.12C451 6.731 529.8 13.25 579.8 63.24c56.5 56.46 56.5 148.06 0 204.46L467.5 380z" />
     </svg>
   ),
   execute: ({ state, view }) => {
diff --git a/src/commands/olist.tsx b/src/commands/olist.tsx
@@ -5,7 +5,7 @@ export const olist: ICommand = {
   keyCommand: 'olist',
   button: { 'aria-label': 'Add olist text' },
   icon: (
-    <svg viewBox="0 0 576 512" height="16" width="16">
+    <svg viewBox="0 0 576 512" height="14" width="14">
       <path
         fill="currentColor"
         d="M55.1 56.04c0-13.26 11.64-24 24-24h32c14.2 0 24 10.74 24 24V176h16c14.2 0 24 10.8 24 24 0 13.3-9.8 24-24 24h-80c-12.36 0-24-10.7-24-24 0-13.2 11.64-24 24-24h16V80.04h-8c-12.36 0-24-10.75-24-24zm63.6 285.16c-6.6-7.4-18.3-6.9-24.05 1.2l-11.12 15.5c-7.7 10.8-22.69 13.3-33.48 5.6-10.79-7.7-13.28-22.7-5.58-33.4l11.12-15.6c23.74-33.3 72.31-35.7 99.21-4.9 21.3 23.5 20.8 60.9-1.1 84.7L118.8 432H152c13.3 0 24 10.7 24 24s-10.7 24-24 24H64c-9.53 0-18.16-5.6-21.98-14.4-3.83-8.7-2.12-18.9 4.34-25.9l72.04-78c5.3-5.8 5.4-14.6.3-20.5zM512 64c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32 0-17.67 14.3-32 32-32h256zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32h256zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32h256z"
diff --git a/src/commands/preview.tsx b/src/commands/preview.tsx
@@ -45,11 +45,8 @@ export const preview: ICommand = {
   keyCommand: 'preview',
   button: (command, props, opts) => <Preview command={command} editorProps={{ ...props, ...opts }} />,
   icon: (
-    <svg width="16" height="16" viewBox="0 0 32 32">
-      <path
-        fill="currentColor"
-        d="M0 16c3.037-5.864 9.058-9.802 16-9.802s12.963 3.938 15.953 9.703l0.047 0.1c-3.037 5.864-9.058 9.802-16 9.802s-12.963-3.938-15.953-9.703l-0.047-0.1zM16 22.531c3.607 0 6.531-2.924 6.531-6.531s-2.924-6.531-6.531-6.531v0c-3.607 0-6.531 2.924-6.531 6.531s2.924 6.531 6.531 6.531v0zM16 19.265c-1.804 0-3.265-1.461-3.265-3.265s1.461-3.265 3.265-3.265v0c1.804 0 3.265 1.461 3.265 3.265s-1.461 3.265-3.265 3.265v0z"
-      />
+    <svg fill="currentColor" viewBox="0 0 576 512" height="16" width="16">
+      <path d="M279.6 160.4c2.8-.3 5.6-.4 8.4-.4 53 0 96 42.1 96 96 0 53-43 96-96 96-53.9 0-96-43-96-96 0-2.8.1-5.6.4-8.4 9.3 4.5 20.1 8.4 31.6 8.4 35.3 0 64-28.7 64-64 0-11.5-3.9-22.3-8.4-31.6zm201-47.8c46.8 43.4 78.1 94.5 92.9 131.1 3.3 7.9 3.3 16.7 0 24.6-14.8 35.7-46.1 86.8-92.9 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.58-80.6C48.62 355.1 17.34 304 2.461 268.3a31.967 31.967 0 0 1 0-24.6C17.34 207.1 48.62 156 95.42 112.6 142.5 68.84 207.2 32 288 32c80.8 0 145.5 36.84 192.6 80.6zM288 112c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144z" />
     </svg>
   ),
 };
diff --git a/src/commands/quote.tsx b/src/commands/quote.tsx
@@ -6,11 +6,8 @@ export const quote: ICommand = {
   keyCommand: 'quote',
   button: { 'aria-label': 'Add quote text' },
   icon: (
-    <svg width="12" height="12" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M512 80v128c0 137.018-63.772 236.324-193.827 271.172-15.225 4.08-30.173-7.437-30.173-23.199v-33.895c0-10.057 6.228-19.133 15.687-22.55C369.684 375.688 408 330.054 408 256h-72c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h128c26.51 0 48 21.49 48 48zM176 32H48C21.49 32 0 53.49 0 80v128c0 26.51 21.49 48 48 48h72c0 74.054-38.316 119.688-104.313 143.528C6.228 402.945 0 412.021 0 422.078v33.895c0 15.762 14.948 27.279 30.173 23.199C160.228 444.324 224 345.018 224 208V80c0-26.51-21.49-48-48-48z"
-      />
+    <svg fill="currentColor" viewBox="0 0 448 512" height="15" width="15">
+      <path d="M96 96c-53.02 0-96 42.1-96 96s42.98 96 96 96c11.28 0 21.95-2.305 32-5.879V288c0 35.3-28.7 64-64 64-17.67 0-32 14.33-32 32s14.33 32 32 32c70.58 0 128-57.42 128-128v-96c0-53.9-43-96-96-96zm352 96c0-53.02-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96c11.28 0 21.95-2.305 32-5.879V288c0 35.3-28.7 64-64 64-17.67 0-32 14.33-32 32s14.33 32 32 32c70.58 0 128-57.42 128-128v-96z" />
     </svg>
   ),
   execute: ({ state, view }) => {
diff --git a/src/commands/strike.tsx b/src/commands/strike.tsx
@@ -6,11 +6,8 @@ export const strike: ICommand = {
   keyCommand: 'strike',
   button: { 'aria-label': 'Add strike text' },
   icon: (
-    <svg width="12" height="12" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M496 288H16c-8.837 0-16-7.163-16-16v-32c0-8.837 7.163-16 16-16h480c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16zm-214.666 16c27.258 12.937 46.524 28.683 46.524 56.243 0 33.108-28.977 53.676-75.621 53.676-32.325 0-76.874-12.08-76.874-44.271V368c0-8.837-7.164-16-16-16H113.75c-8.836 0-16 7.163-16 16v19.204c0 66.845 77.717 101.82 154.487 101.82 88.578 0 162.013-45.438 162.013-134.424 0-19.815-3.618-36.417-10.143-50.6H281.334zm-30.952-96c-32.422-13.505-56.836-28.946-56.836-59.683 0-33.92 30.901-47.406 64.962-47.406 42.647 0 64.962 16.593 64.962 32.985V136c0 8.837 7.164 16 16 16h45.613c8.836 0 16-7.163 16-16v-30.318c0-52.438-71.725-79.875-142.575-79.875-85.203 0-150.726 40.972-150.726 125.646 0 22.71 4.665 41.176 12.777 56.547h129.823z"
-      />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="14" width="14">
+      <path d="M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21-3.031 17.59-10.88 29.34-24.72 36.99-35.44 19.75-108.5 11.96-186-19.68-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37 29.62 0 58.81-5.156 83.72-18.96 30.81-17.09 50.44-45.46 56.72-82.11 3.998-23.27 2.168-42.58-3.488-59.05H332.2zm155.8-80-176.5-.03c-15.85-5.614-31.83-10.34-46.7-14.62-85.47-24.62-110.9-39.05-103.7-81.33 2.5-14.53 10.16-25.96 22.72-34.03 20.47-13.15 64.06-23.84 155.4.343 17.09 4.53 34.59-5.654 39.13-22.74 4.531-17.09-5.656-34.59-22.75-39.12-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1c-8.83 51.4 9.81 84.2 39.11 106.8H24c-13.25 0-24 10.75-24 23.1 0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1 0-12.3-10.7-23.1-24-23.1z" />
     </svg>
   ),
   execute: ({ state, view }) => {
diff --git a/src/commands/todo.tsx b/src/commands/todo.tsx
@@ -5,11 +5,8 @@ export const todo: ICommand = {
   keyCommand: 'todo',
   button: { 'aria-label': 'Add todo List' },
   icon: (
-    <svg viewBox="0 0 512 512" height="16" width="16">
-      <path
-        fill="currentColor"
-        d="M152.1 38.16c9.8 8.87 10.6 24.04 1.7 33.9L81.84 152.1c-4.41 4.8-10.63 7.7-17.21 7-6.58 1.1-12.94-1.5-17.6-7l-40.001-40c-9.372-8.5-9.372-23.7 0-33.07 9.371-9.37 24.571-9.37 33.941 0l22.11 22.07 55.12-61.16c8.8-9.85 24-10.65 33.9-1.78zm0 160.04c9.8 8.8 10.6 24 1.7 33.9l-71.96 80c-4.41 4.8-10.63 7.7-17.21 7-6.58 1.1-12.94-1.5-17.6-7l-40.001-40c-9.372-8.5-9.372-23.7 0-33.1 9.371-9.3 24.571-9.3 33.941 0l22.11 22.1 55.12-61.2c8.8-9.8 24-10.6 33.9-1.7zM224 96c0-17.67 14.3-32 32-32h224c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm-64 160c0-17.7 14.3-32 32-32h288c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM0 416c0-26.5 21.49-48 48-48s48 21.5 48 48-21.49 48-48 48-48-21.5-48-48z"
-      />
+    <svg fill="currentColor" viewBox="0 0 512 512" height="14" width="14">
+      <path d="M152.1 38.16c9.8 8.87 10.6 24.04 1.7 33.9L81.84 152.1c-4.41 4.8-10.63 7.7-17.21 7-6.58 1.1-12.94-1.5-17.6-7l-40.001-40c-9.372-8.5-9.372-23.7 0-33.07 9.371-9.37 24.571-9.37 33.941 0l22.11 22.07 55.12-61.16c8.8-9.85 24-10.65 33.9-1.78zm0 160.04c9.8 8.8 10.6 24 1.7 33.9l-71.96 80c-4.41 4.8-10.63 7.7-17.21 7-6.58 1.1-12.94-1.5-17.6-7l-40.001-40c-9.372-8.5-9.372-23.7 0-33.1 9.371-9.3 24.571-9.3 33.941 0l22.11 22.1 55.12-61.2c8.8-9.8 24-10.6 33.9-1.7zM224 96c0-17.67 14.3-32 32-32h224c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm-64 160c0-17.7 14.3-32 32-32h288c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM0 416c0-26.5 21.49-48 48-48s48 21.5 48 48-21.49 48-48 48-48-21.5-48-48z" />
     </svg>
   ),
   execute: ({ state, view }) => {
diff --git a/src/commands/ulist.tsx b/src/commands/ulist.tsx
@@ -6,7 +6,7 @@ export const ulist: ICommand = {
   keyCommand: 'ulist',
   button: { 'aria-label': 'Add ulist text' },
   icon: (
-    <svg viewBox="0 0 512 512" height="16" width="16">
+    <svg viewBox="0 0 512 512" height="14" width="14">
       <path
         fill="currentColor"
         d="M88 48c13.3 0 24 10.75 24 24v48c0 13.3-10.7 24-24 24H40c-13.25 0-24-10.7-24-24V72c0-13.25 10.75-24 24-24h48zm392 16c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32 0-17.67 14.3-32 32-32h288zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32h288zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32h288zM16 232c0-13.3 10.75-24 24-24h48c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24H40c-13.25 0-24-10.7-24-24v-48zm72 136c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24H40c-13.25 0-24-10.7-24-24v-48c0-13.3 10.75-24 24-24h48z"
diff --git a/src/commands/underline.tsx b/src/commands/underline.tsx
@@ -6,11 +6,8 @@ export const underline: ICommand = {
   keyCommand: 'underline',
   button: { 'aria-label': 'Add underline text' },
   icon: (
-    <svg width="14" height="14" viewBox="0 0 20 20">
-      <path
-        fill="currentColor"
-        d="M10 17c3.3 0 6-2.7 6-6V3.5c0-.8-.7-1.5-1.5-1.5S13 2.7 13 3.5V11c0 1.7-1.3 3-3 3s-3-1.3-3-3V3.5C7 2.7 6.3 2 5.5 2S4 2.7 4 3.5V11c0 3.3 2.7 6 6 6zM16.5 19h-13c-.3 0-.5.2-.5.5s.2.5.5.5h13c.3 0 .5-.2.5-.5s-.2-.5-.5-.5z"
-      />
+    <svg fill="currentColor" viewBox="0 0 448 512" height="13" width="13">
+      <path d="M416 448H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h384c17.69 0 32-14.31 32-32s-14.3-32-32-32zM48 64.01h16v160c0 88.22 71.78 159.1 160 159.1s160-71.78 160-159.1v-160h16c17.69 0 32-14.32 32-32S417.69.91 400 .91l-96-.005c-17.69 0-32 14.32-32 32s14.31 32 32 32h16v160c0 52.94-43.06 95.1-96 95.1S128 276.1 128 224V64h16c17.69 0 32-14.31 32-32S161.69 0 144 0L48 .005c-17.69 0-32 14.31-32 31.1S30.31 64.01 48 64.01z" />
     </svg>
   ),
   execute: ({ state, view }) => {
diff --git a/src/components/ToolBar/index.less b/src/components/ToolBar/index.less
@@ -15,19 +15,22 @@
     border-radius: 3px 3px 0 0;
     display: flex;
     flex-wrap: wrap;
-    gap: 2px;
+    gap: 4px;
     align-items: center;
     button {
       background: none;
       border: none;
       cursor: pointer;
       outline: 0;
       display: inline-block;
-      height: 24px;
-      width: 24px;
-      padding: 3px 2px;
+      height: 20px;
+      width: 20px;
+      padding: 0;
       border-radius: 2px;
       transition: all 0.3s;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       color: var(--color-fg-default);
       &:hover {
         color: var(--color-accent-fg);
