<- Vuepress

# vuepress - SVG Icon System

# Ablage der SVG Icons

Zur Ablage der SVG Icons, die wir später auf den einzelnen Vuepress Seiten verwenden wollen, legen wir im Ordner ./.vuepress/components einen neuen Unterordner iconan. Die einzelnen SVG Icons/Logs werden dann dort als jeweils eigne .vue Datei abgelegt. Der Vorteil ist, dass man im Editor sofort alle verfügbaren Icons im Dateisystem sieht.

.
└─ .vuepress
   └─ components
      └─ icon
         ├─ android.vue
         ├─ circuit.vue
         ├─ git.vue
         ├─ gitlab.vue
         ├─ webrtc.vue
         └─ youtube.vue

# Vue Komponentenname eines Icons

Die Vue-Komponente eines Icons kann dann später über den Namen des Unterordners icon, einen Bindestrich - und den Namen des Icons, z.B. circuit (ohne der Endung .vue) aufgerufen werden. Das Circuit Icon wird in den Markdowndateien einer Vuepressseite somit mit <icon-circuit/> aufgerufen.

Wie Namen der Vue Komponenten verwendet werden findet man in der Dokumentation von Vuepress unter Vuepress, Using Vue in Markdown, Using Components.

# Anpassung der SVG Dateien

Die SVG Dateien der Icons werden als Vue-Datei abegelegt. Die vorhandenen SVG html Tags ewerden dabei mit umschlossen.

<template>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 343.000000 343.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,343.000000) scale(0.100000,-0.100000)"
fill="#88c641" stroke="none">
<path d="M1508 3400 c-486 -61 -937 -344 -1203 -753 -173 -267 -261 -547 -272
-868 -6 -174 5 -296 42 -454 84 -360 304 -703 595 -931 212 -166 457 -279 726
-336 94 -19 139 -23 324 -23 185 0 230 4 324 23 269 56 512 169 726 335 288
224 511 573 595 932 53 227 59 498 15 720 -133 674 -643 1187 -1330 1335 -108
24 -424 35 -542 20z m584 -744 c127 -32 178 -85 178 -185 0 -139 -61 -178
-208 -136 -212 62 -402 20 -525 -116 -112 -123 -151 -246 -151 -474 1 -135 3
-159 28 -240 98 -321 329 -430 697 -329 57 15 70 16 98 4 43 -17 61 -56 61
-132 0 -138 -83 -191 -345 -219 -199 -21 -374 5 -516 77 -99 50 -152 91 -226
177 -231 266 -280 762 -112 1125 112 244 303 399 561 457 80 19 376 13 460 -9z"/>
</g>
</svg>

</template>

# Skalierung der SVG Icons

Zur Skalierung der Icons innerhalb der Markdownseitenverwenden wir eine weitere Vue Komponente, die im Vuepress Cookbook - Editable SVG Icons Systems beschrieben wird.

Dazu legen wir unter ./.vuepress/components eine Vue-Datei mit den Namen IconBase.vue an.

<template>
    <span>
        <svg v-bind:width="width" v-bind:viewBox="viewBox"><g :fill="iconColor"><slot/></g></svg>
    </span>
</template>

<script>
export default {
  props: {
  width: {
    default: '3em',
    type: String
  },
  viewBox: {
    default: "0 0 100 100",
    type: String
  },
  name: {
    default: "#icon-download",
    type: String
  },
    iconColor: {
      type: String,
      default: 'currentColor'
  }
}
}
</script>

<style scoped>
svg {
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: -2px; /* yes, I'm that particular about formatting */
}
</style>

Das Beispiel vom Vue Cookbook wurde dabei an zwei Stellen angepasst. Der <template></template> Bereich wurde ausgetauscht und im <script></script> der Parameter viewBox ergänt, um "störische" Icons von der große anpassen zu können.

Ein SVG Icon kann nun mit der gewünschten Skalierung innerhalb der Markdown-Datei einer Vuepressseite einfach eingefügt werden:

Mit Schriftgröße 1em: circuit: <IconBase width="1em"><icon-circuit/></IconBase>: circuit:

Mit Schriftgröße 2em: circuit: <IconBase width="2em"><icon-circuit/></IconBase>: circuit:

Mit Schriftgröße 3em: circuit: <IconBase width="3em"><icon-circuit/></IconBase>: circuit:

Mit Schriftgröße 4em: circuit: <IconBase width="4em"><icon-circuit/></IconBase>: circuit:

Mit Schriftgröße 5.5em: circuit: <IconBase width="5.5em"><icon-circuit/></IconBase>: circuit:

# Ressourcen

• SVG Bibliotheck icomoon

# Ohne Skalierung

Wird ein SVG Icon nicht eingebetet in der Vue Komponente <IconBase></IconBase> aufgerufen, wird es so dargestellt, wie es in der SVG Datei definiert ist.

<icon-circuit/>: