inicios del FrontEnd

APP/assets/sass/dashboard/custom/_icons.scss

@@ -0,0 +1,92 @@
+.icon {
+	width: $icon-size;
+	height: $icon-size;
+
+	i, svg {
+		font-size: $icon-size - .75;
+	}
+}
+
+.icon + .icon-text {
+	padding-left: 1rem;
+	width: calc(100% - #{$icon-size-regular} - 1);
+}
+
+.icon-xl {
+	width: $icon-size-xl;
+	height: $icon-size-xl;
+
+	i, svg {
+		font-size: $icon-size-xl - .75;
+	}
+}
+
+.icon-xl + .icon-text {
+	width: calc(100% - #{$icon-size-xl} - 1);
+}
+
+.icon-lg {
+	width: $icon-size-lg;
+	height: $icon-size-lg;
+
+	i, svg {
+		font-size: $icon-size-lg - .75;
+	}
+}
+
+.icon-lg + .icon-text {
+	width: calc(100% - #{$icon-size-lg} - 1);
+}
+
+.icon-sm {
+	width: $icon-size-sm;
+	height: $icon-size-sm;
+
+	i, svg {
+		font-size: $icon-size-sm - .75;
+	}
+}
+
+.icon-sm + .icon-text {
+	width: calc(100% - #{$icon-size-sm} - 1);
+}
+
+
+// Icons included in shapes
+.icon-shape {
+	padding: 12px;
+	text-align: center;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+
+
+	i, svg {
+		font-size: 1.25rem;
+	}
+
+	&.icon-lg {
+		i, svg {
+			font-size: 1.625rem;
+		}
+	}
+
+	&.icon-sm {
+		i, svg {
+			font-size: .875rem;
+		}
+	}
+
+	svg {
+		width: 30px;
+		height: 30px;
+	}
+
+}
+
+@each $color, $value in $theme-colors {
+	.icon-shape-#{$color} {
+		@include icon-shape-variant(theme-color($color));
+	}
+}