Add text label to SVG

Author: snirp

README.md

@@ -36,6 +36,7 @@ angle (default is right / 3 o'clock).
 ## Properties
 |prop|description|default|options|
 |:---|---|---|---|
+|`size`|width and height of element|`10rem`|String|
 |`dashCount`|Total number of dashes|`60`|Natural number|
 |`activeCount`|Number of dashes on top|`10`|Natural number|
 |`strokeWidth`|Bottom stroke as a percentage of the radius|`20`|`0` to `100`|
@@ -45,6 +46,7 @@ angle (default is right / 3 o'clock).
 |`dashSpacing`|Fraction of width taken up by space between dashes|`1/4`|`0` to `1`|
 |`rotate`|Degrees rotation for start angle (0 = right)|`-90`|`-360` to `360`|
 |`reverse`|Reverse the direction of counting (true = counter-clockwise)|`false`|`false` or `true`|
+|`text`|Text string to display inside SVG|`""`|String|
 
 ## License
 

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <circle-counter width="20rem" height="20rem"/>
+    <circle-counter width="20rem" height="20rem" text="label"/>
   </div>
 </template>
 

src/CircleCounter.vue

@@ -1,5 +1,9 @@
 <template>
-  <svg :viewBox="`0 0 ${UNITS} ${UNITS}`" height="100%" width="100%">
+  <svg 
+    :viewBox="`0 0 ${UNITS} ${UNITS}`" 
+    :height="size || '100%'" 
+    :width="size || '100%'" 
+  >
     <g :transform="`rotate(${rotate},${UNITS/2},${UNITS/2}) ${reverse ? 'scale(1,-1) translate(0, -' + UNITS +')' : ''}`">
       <circle 
         :cx="UNITS/2" 
@@ -18,16 +22,25 @@
         :stroke-dasharray="getLengths()"
       />
     </g>
+    <text fill="currentColor" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" >{{text}}</text>
   </svg>
 </template>
 
 <script>
 export default {
   beforeCreate() {
     // Arbitrary dimensions of SVG to set up user-space units
-    this.UNITS = 32;
+    this.UNITS = 200;
   },
   props: {
+    size: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''      
+    },
     dashCount: {
       type: Number,
       default: 60