[Component] Block Title

src/assets/images/title-block.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30.252" height="30.252" viewBox="0 0 30.252 30.252">
+    <path fill="#1060ff" d="M87.79 130.265l-6.932-6.932-6.1-6.1a2.07 2.07 0 0 0-2.926 0L58.75 130.316a2.068 2.068 0 0 0 0 2.926l13.031 13.031a2.068 2.068 0 0 0 2.926 0l6.1-6.1 6.983-6.983a2.069 2.069 0 0 0 0-2.925z" transform="translate(-58.143 -116.627)"/>
+</svg>

src/assets/scss/blocktitle.scss

@@ -0,0 +1,37 @@
+$fontFamily: "Noto Serif CJK TC -Black";
+
+div.block.title {
+    display: flex;
+    justify-content: center;
+
+    font-size: 26px;
+    font-family: $fontFamily;
+    font-weight: bold;
+
+    line-height: 1.44;
+    
+    margin: 36px 0;
+    
+    span.text {
+        display: contents;
+
+        &::before, &::after {
+            display: inline-block;
+            content: '';
+            width: 1.44em;
+            height: 1.44em;
+            margin: auto;
+            vertical-align: middle;
+            background-image: url('../assets/images/title-block.svg');
+            background-size: contain;
+        }
+    
+        &::before {
+            margin-right: 18px;
+        }
+    
+        &::after {
+            margin-left: 18px;
+        }
+    }
+}

src/components/BlockTitle.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="block title">
+    <span class="text">{{ text }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class BlockTitle extends Vue {
+  @Prop({ default: '' }) private text!: string;
+}
+</script>
+<style lang="scss">
+@import '@/assets/scss/blocktitle';
+</style>