icons fixes

gulpfile.js

@@ -69,7 +69,7 @@ if (!Array.prototype.flat) {
 }
 
 /**
- * Import tabler-icons form npm and other svg files from `/svg/brand/` directory and generate Jekyll `.yml` data files
+ * Import tabler-icons form npm and generate Jekyll `.yml` data files
  */
 gulp.task('svg-icons', (cb) => {
 	const prepareSvgFile = (svg) => {

src/pages/_docs/buttons.md

@@ -219,7 +219,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 {% capture code %}
 {% include ui/button.html icon="activity" color="primary" icon-only=true %}
-{% include ui/button.html icon="brand/github" color="github" icon-only=true %}
+{% include ui/button.html icon="brand-github" color="github" icon-only=true %}
 {% include ui/button.html icon="bell" color="success" icon-only=true %}
 {% include ui/button.html icon="star" color="warning" icon-only=true %}
 {% include ui/button.html icon="trash" color="danger" icon-only=true %}

src/pages/_includes/cards/profile-2.html

@@ -9,12 +9,12 @@
 				<ul class="social-links list-inline mb-0 mt-2">
 					<li class="list-inline-item">
 						<a href="#" title="Facebook" data-toggle="tooltip">
-							{% include ui/icon.html icon="brand/facebook" %}
+							{% include ui/icon.html icon="brand-facebook" %}
 						</a>
 					</li>
 					<li class="list-inline-item">
 						<a href="#" title="Twitter" data-toggle="tooltip">
-							{% include ui/icon.html icon="brand/twitter" %}
+							{% include ui/icon.html icon="brand-twitter" %}
 						</a>
 					</li>
 					<li class="list-inline-item">

src/pages/_includes/cards/profile.html

@@ -7,7 +7,7 @@
 		</p>
 
 		<button class="btn btn-outline-primary btn-sm">
-			{% include ui/icon.html icon="brand/twitter" %}
+			{% include ui/icon.html icon="brand-twitter" %}
 			Follow
 		</button>
 	</div>

src/pages/_includes/cards/sign-in.html

@@ -31,8 +31,8 @@
 
 	<div class="card-body">
 		<div class="btn-list">
-			{% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
-			{% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
+			{% include ui/button.html color="white" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
+			{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
 		</div>
 	</div>
 </form>

src/pages/_includes/cards/timeline.html

@@ -5,7 +5,7 @@
 	<div class="card-body">
 		<ul class="list list-timeline{% if include.simple %} list-timeline-simple{% endif %}">
 			<li>
-				<div class="list-timeline-icon bg-twitter">{% include ui/icon.html icon="brand/twitter" %}</div>
+				<div class="list-timeline-icon bg-twitter">{% include ui/icon.html icon="brand-twitter" %}</div>
 				<div class="list-timeline-content">
 					<div class="list-timeline-time">10 hrs ago</div>
 					<p class="list-timeline-title">+1150 Followers</p>
@@ -29,7 +29,7 @@
 				</div>
 			</li>
 			<li>
-				<div class="list-timeline-icon bg-facebook">{% include ui/icon.html icon="brand/facebook" %}</div>
+				<div class="list-timeline-icon bg-facebook">{% include ui/icon.html icon="brand-facebook" %}</div>
 				<div class="list-timeline-content">
 					<div class="list-timeline-time">1 day ago</div>
 					<p class="list-timeline-title">+290 Page Likes</p>

src/pages/_includes/forms/form-elements-6.html

@@ -20,8 +20,8 @@
 
 <div class="mb-3">
 	<label class="form-label">Form buttons</label>
-	{% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
-	{% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
+	{% include ui/button.html color="white" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
+	{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
 </div>
 
 <div class="mb-3">

src/pages/snippets.html

@@ -49,7 +49,7 @@ libs: jquery, apexcharts, peity
 	<div class="col-md-6 col-lg-4">
 		{% include cards/small-stats.html chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}
 		{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}
-		{% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand/github" %}
+		{% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}
 		{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=10 %}
 		{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=11 %}
 		{% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %}

src/scss/ui/_buttons.scss

@@ -27,8 +27,8 @@
   i {
     width: $icon-size;
     height: $icon-size;
-    margin: 0 .25rem 0;
-    margin-inline-start: -.5rem;
+    margin: 0 .5rem 0;
+    margin-inline-start: -.25rem;
     vertical-align: bottom;
   }
 
@@ -36,13 +36,13 @@
     width: 1.25rem;
     height: 1.25rem;
     vertical-align: text-top;
-    margin: 0 .25rem 0;
-    margin-inline-start: -.5rem;
+    margin: 0 .5rem 0;
+    margin-inline-start: -.25rem;
   }
 
   .icon-right {
-    margin: 0 .25rem 0;
-    margin-inline-end: -.5rem;
+    margin: 0 .5rem 0;
+    margin-inline-end: -.25rem;
   }
 
   .badge {