refactor: add SVGs inside html

Author: mrholek

pug/views/base/switches.pug

@@ -132,48 +132,48 @@ block view
       .col-md-6
         .card
           .card-header
-            | Switch outline alternative
+            | Switch opposite
           .card-body
-            label.c-switch.c-switch-outline-primary-alt
+            label.c-switch.c-switch-opposite-primary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-outline-secondary-alt
+            label.c-switch.c-switch-opposite-secondary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-outline-success-alt
+            label.c-switch.c-switch-opposite-success
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-outline-warning-alt
+            label.c-switch.c-switch-opposite-warning
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-outline-info-alt
+            label.c-switch.c-switch-opposite-info
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-outline-danger-alt
+            label.c-switch.c-switch-opposite-danger
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
       // /.col
       .col-md-6
         .card
           .card-header
-            | Switch outline alternative - pills
+            | Switch opposite - pills
           .card-body
-            label.c-switch.c-switch-pill.c-switch-outline-primary-alt
+            label.c-switch.c-switch-pill.c-switch-opposite-primary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-pill.c-switch-outline-secondary-alt
+            label.c-switch.c-switch-pill.c-switch-opposite-secondary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-pill.c-switch-outline-success-alt
+            label.c-switch.c-switch-pill.c-switch-opposite-success
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-pill.c-switch-outline-warning-alt
+            label.c-switch.c-switch-pill.c-switch-opposite-warning
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-pill.c-switch-outline-info-alt
+            label.c-switch.c-switch-pill.c-switch-opposite-info
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
-            label.c-switch.c-switch-pill.c-switch-outline-danger-alt
+            label.c-switch.c-switch-pill.c-switch-opposite-danger
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider
       // /.col
@@ -276,48 +276,48 @@ block view
       .col-md-6
         .card
           .card-header
-            | Switch with text outline alternative
+            | Switch with text opposite
           .card-body
-            label.c-switch.c-switch-label.c-switch-outline-primary-alt
+            label.c-switch.c-switch-label.c-switch-opposite-primary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-outline-secondary-alt
+            label.c-switch.c-switch-label.c-switch-opposite-secondary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-outline-success-alt
+            label.c-switch.c-switch-label.c-switch-opposite-success
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-outline-warning-alt
+            label.c-switch.c-switch-label.c-switch-opposite-warning
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-outline-info-alt
+            label.c-switch.c-switch-label.c-switch-opposite-info
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-outline-danger-alt
+            label.c-switch.c-switch-label.c-switch-opposite-danger
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
       // /.col
       .col-md-6
         .card
           .card-header
-            | Switch with text outline alternative - pills
+            | Switch with text opposite - pills
           .card-body
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-primary-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-primary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-secondary-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-secondary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-success-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-success
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-warning-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-warning
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-info-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-info
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-danger-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-danger
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked='On', data-unchecked='Off')
       // /.col
@@ -420,48 +420,48 @@ block view
       .col-md-6
         .card
           .card-header
-            | Switch with icon outline alternative
+            | Switch with icon opposite
           .card-body
-            label.c-switch.c-switch-label.c-switch-outline-primary-alt
+            label.c-switch.c-switch-label.c-switch-opposite-primary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-outline-secondary-alt
+            label.c-switch.c-switch-label.c-switch-opposite-secondary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-outline-success-alt
+            label.c-switch.c-switch-label.c-switch-opposite-success
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-outline-warning-alt
+            label.c-switch.c-switch-label.c-switch-opposite-warning
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-outline-info-alt
+            label.c-switch.c-switch-label.c-switch-opposite-info
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-outline-danger-alt
+            label.c-switch.c-switch-label.c-switch-opposite-danger
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
       // /.col
       .col-md-6
         .card
           .card-header
-            | Switch with icon outline alternative - pills
+            | Switch with icon opposite - pills
           .card-body
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-primary-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-primary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-secondary-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-secondary
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-success-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-success
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-warning-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-warning
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-info-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-info
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
-            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-danger-alt
+            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-danger
               input.c-switch-input(type='checkbox', checked='')
               span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
       // /.col

pug/views/icons/brands.pug

@@ -9,14 +9,15 @@ block view
   .fade-in
     .card.card-default
       .card-header
-        |  CoreUI Icons
+        | Brand Icons
         .card-header-actions
           a.card-header-action(href='https://github.com/coreui/coreui-icons', target='_blank') Github
       .card-body
         .row.text-center
           each icon in icons
             .col-6.col-sm-4.col-md-2
-              i(class='c-icon c-icon-2xl mt-5 fab fa-' + icon)
+              svg.c-icon.c-icon-2xl.mt-5
+                use(xlink:href='assets/icons/brands/brands-symbol-defs.svg#'+ icon)
               div=icon
         // /.row