feat: new icons package (#166)

jmjuanes · Jun 28, 2022 · 1686b9f · 1686b9f
1 parent 4d16898
commit 1686b9f
Show file tree

Hide file tree

Showing 209 changed files with 958 additions and 1,703 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,6 +23,8 @@ distributions
 release
 siimple.css
 siimple/*.css
+siimple-icons/*.css
+siimple-icons/siimple-icons.svg
 packages/*/*.css
 
 # Applications output folders

diff --git a/docs/helpers/other.mdx b/docs/helpers/other.mdx
@@ -110,7 +110,7 @@ You can use `is-aligned-left` to float an element to the left side of it's conta
 ```html live=true
 <div class="is-aligned-left has-w-32 has-h-32 has-mr-8 has-radius-md has-bg-blue-500">
     <div class="has-w-full has-h-full is-flex has-justify-center">
-        <i class="icon-image has-size-7 has-text-white"></i>
+        <i class="si-image has-size-7 has-text-white"></i>
     </div>
 </div>
 <p class="has-text-justified has-mb-0">
@@ -128,7 +128,7 @@ Use `is-aligned-right` to float an element to the right side of it's containing
 ```html live=true
 <div class="is-aligned-right has-w-32 has-h-32 has-ml-8 has-radius-md has-bg-blue-500">
     <div class="has-w-full has-h-full is-flex has-justify-center">
-        <i class="icon-image has-size-7 has-text-white"></i>
+        <i class="si-image has-size-7 has-text-white"></i>
     </div>
 </div>
 <p class="has-text-justified has-mb-0">

diff --git a/docs/icons.mdx b/docs/icons.mdx
diff --git a/docs/packages/icons.mdx b/docs/packages/icons.mdx
diff --git a/docs/recipes/features.mdx b/docs/recipes/features.mdx
@@ -9,7 +9,7 @@ title: Features
     <div class="column is-one-third is-full-mobile">
         <div class="card has-shadow-md">
             <div class="">
-                <i class="icon-rocket has-size-9 has-text-primary"></i>
+                <i class="si-rocket has-size-9 has-text-primary"></i>
             </div>
             <div class="title is-4">Feature 1</div>
             <div class="has-text-justify has-mb-4">
@@ -18,14 +18,14 @@ title: Features
             </div>
             <a href="#" class="is-not-underlined has-text-primary has-text-secondary-hover">
                 <b>Learn more</b>
-                <i class="icon-chevron-right"></i>
+                <i class="si-chevron-right"></i>
             </a>
         </div>
     </div>
     <div class="column is-one-third is-full-mobile">
         <div class="card has-shadow-md">
             <div class="">
-                <i class="icon-rocket has-size-9 has-text-primary"></i>
+                <i class="si-rocket has-size-9 has-text-primary"></i>
             </div>
             <div class="title is-4">Feature 2</div>
             <div class="has-text-justify has-mb-4">
@@ -34,14 +34,14 @@ title: Features
             </div>
             <a href="#" class="is-not-underlined has-text-primary has-text-secondary-hover">
                 <b>Learn more</b>
-                <i class="icon-chevron-right"></i>
+                <i class="si-chevron-right"></i>
             </a>
         </div>
     </div>
     <div class="column is-one-third is-full-mobile">
         <div class="card has-shadow-md">
             <div class="">
-                <i class="icon-rocket has-size-9 has-text-primary"></i>
+                <i class="si-rocket has-size-9 has-text-primary"></i>
             </div>
             <div class="title is-4">Feature 3</div>
             <div class="has-text-justify has-mb-4">
@@ -50,7 +50,7 @@ title: Features
             </div>
             <a href="#" class="is-not-underlined has-text-primary has-text-secondary-hover">
                 <b>Learn more</b>
-                <i class="icon-chevron-right"></i>
+                <i class="si-chevron-right"></i>
             </a>
         </div>
     </div>

diff --git a/docs/recipes/footer.mdx b/docs/recipes/footer.mdx
@@ -9,20 +9,20 @@ title: Footer
     <div class="columns">
         <div class="column is-full-mobile">
             <div class="has-mb-2">
-                <i class="icon-coffee has-size-6"></i>
+                <i class="si-coffee has-size-6"></i>
             </div>
             <div class="has-size-0 has-maxw-64 has-text-gray-500 has-mb-4">
                 <b>Company</b> Lorem ipsum dolor sit amet, consectetur...
             </div>
             <div class="is-flex">
                 <div class="has-radius-md has-p-2 has-bg-gray-200 has-bg-gray-300-hover has-mr-2 is-clickable has-lh-none">
-                    <i class="icon-external-link has-size-2"></i>
+                    <i class="si-external-link has-size-2"></i>
                 </div>
                 <div class="has-radius-md has-p-2 has-bg-gray-200 has-bg-gray-300-hover has-mr-2 is-clickable has-lh-none">
-                    <i class="icon-external-link has-size-2"></i>
+                    <i class="si-external-link has-size-2"></i>
                 </div>
                 <div class="has-radius-md has-p-2 has-bg-gray-200 has-bg-gray-300-hover has-mr-2 is-clickable has-lh-none">
-                    <i class="icon-external-link has-size-2"></i>
+                    <i class="si-external-link has-size-2"></i>
                 </div>
             </div>
         </div>

diff --git a/docs/recipes/hero.mdx b/docs/recipes/hero.mdx
@@ -18,7 +18,7 @@ A simple hero component with a title, a large description and an action button.
     <div class="">
         <a class="button has-bg-blue-600-hover is-inline-flex has-items-center">
             <span>Getting started</span>
-            <i class="icon-rocket has-size-2 has-pl-2"></i>
+            <i class="si-rocket has-size-2 has-pl-2"></i>
         </a>
     </div>
 </div>

diff --git a/docs/recipes/pricing.mdx b/docs/recipes/pricing.mdx
@@ -19,21 +19,21 @@ title: Pricing
             </div>
             <div class="divider"></div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mt-6">
                 <button class="button is-full has-bg-blue-600-hover">
                     <span>Get started</span>
-                    <i class="icon-arrow-right has-pl-2"></i>
+                    <i class="si-arrow-right has-pl-2"></i>
                 </button>
             </div>
         </div>
@@ -51,21 +51,21 @@ title: Pricing
             </div>
             <div class="divider"></div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mt-6">
                 <button class="button is-full has-bg-blue-600-hover">
                     <span>Get started</span>
-                    <i class="icon-arrow-right has-pl-2"></i>
+                    <i class="si-arrow-right has-pl-2"></i>
                 </button>
             </div>
         </div>
@@ -83,21 +83,21 @@ title: Pricing
             </div>
             <div class="divider"></div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mb-2 is-flex has-items-start">
-                <i class="icon-check has-text-blue-500 has-pr-2"></i>
+                <i class="si-check has-text-blue-500 has-pr-2"></i>
                 <span>Excepteur sint occaecat cupidatat non proident.</span>
             </div>
             <div class="has-mt-6">
                 <button class="button is-full has-bg-blue-600-hover">
                     <span>Get started</span>
-                    <i class="icon-arrow-right has-pl-2"></i>
+                    <i class="si-arrow-right has-pl-2"></i>
                 </button>
             </div>
         </div>

diff --git a/docs/recipes/sign-in.mdx b/docs/recipes/sign-in.mdx
@@ -19,7 +19,7 @@ Use the [input](/elements/input) and the [card](/elements/card) elements just wi
             <input type="password" class="input" placeholder="Password" />
         </div>
         <button class="button is-full has-bg-blue-600-hover">
-            <i class="icon-lock has-pr-1"></i>
+            <i class="si-lock has-pr-1"></i>
             <span>Sign in</span>
         </button>
     </div>

diff --git a/docs/responsive.mdx b/docs/responsive.mdx
@@ -24,7 +24,7 @@ The following example uses these responsive variants to customize how the card w
 ```html live=true bg=blue-200
 <div class="has-radius-md has-bg-white has-p-6 is-flex has-direction-column-mobile">
     <div class="has-radius-md has-bg-primary has-p-6 has-w-64-tablet is-flex has-justify-center">
-        <i class="icon-image has-text-white has-size-9"></i>
+        <i class="si-image has-text-white has-size-9"></i>
     </div>
     <div class="has-p-6 has-px-none-mobile">
         <div class="title is-4">Hello world!</div>

diff --git a/gulpfile.js b/gulpfile.js
@@ -1,12 +1,10 @@
-import fs from "fs";
 import path from "path";
 import autoprefixer from "autoprefixer";
 import gulp from "gulp";
 import postcss from "gulp-postcss";
 import rename from "gulp-rename";
 import CleanCSS from "clean-css";
 import through from "through2";
-import Vinyl from "vinyl";
 
 import {css} from "@siimple/core";
 import {injectModules} from "@siimple/modules";
@@ -39,53 +37,43 @@ const minify = options => {
     });
 };
 
-// Generate icons
-const iconify = () => {
-    let lastFile = null;
-    const icons = [];
-    // Process SVG icons
-    const bufferContents = function (file, enc, cb) {
-        const content = file.contents.toString();
-        icons.push({
-            name: path.basename(file.path, ".svg"),
-            path: /\sd="([\w,\.\-\s]*)"/gm.exec(content)[1] || "",
+const generateSvgSprite = () => {
+    const attrs = `stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="none"`;
+    return through.obj((file, _, callback) => {
+        import(file.path).then(rawIcons => {
+            const content = Object.keys(rawIcons.default).map(name => {
+                const p = rawIcons.default[name].path;
+                return `<symbol viewBox="0 0 24 24" id="${name}"><path ${attrs} d="${p}"/></symbol>`;
+            });
+            content.unshift(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`);
+            content.push(`</svg>`);
+            file.contents = new Buffer.from(content.join(""));
+            callback(null, file);
         });
-        lastFile = file; // Save reference to last file
-        return cb();
-    };
-    // End stream
-    const endStream = function (cb) {
-        const output = JSON.stringify(icons, null, "    ");
-        // Generate the new file and continue
-        this.push(new Vinyl({
-            base: lastFile.base,
-            path: path.join(lastFile.base, "icons.js"),
-            contents: new Buffer.from(`export default ${output};`),
-        }));
-        return cb();
-    };
-    return through.obj(bufferContents, endStream);
+    });
 };
 
-// Clean output directories
 gulp.task("clean", () => null);
 
-// Build icons
-gulp.task("icons", () => {
-    return gulp.src("icons/*.svg")
-        .pipe(iconify())
-        .pipe(gulp.dest("packages/preset-icons/"));
+gulp.task("icons:sprite", () => {
+    return gulp.src("siimple-icons/icons.js", {base: "./"})
+        .pipe(generateSvgSprite())
+        .pipe(rename("siimple-icons.svg"))
+        .pipe(gulp.dest("siimple-icons/"));
 });
 
-// Generate css files
 gulp.task("css", () => {
-    return gulp.src("siimple.config.js")
+    return gulp.src("siimple*/siimple.config.js", {base: "./"})
         .pipe(siimple())
         .pipe(postcss([autoprefixer()]))
         .pipe(minify({
             "compatibility": "*",
             "level": 2,
         }))
-        .pipe(rename("siimple.css"))
-        .pipe(gulp.dest("siimple/"))
+        .pipe(rename(currentPath => ({
+            dirname: currentPath.dirname,
+            basename: currentPath.dirname,
+            extname: ".css",
+        })))
+        .pipe(gulp.dest("."))
 });
diff --git a/icons/align-center.svg b/icons/align-center.svg
diff --git a/icons/align-justify.svg b/icons/align-justify.svg
diff --git a/icons/align-left.svg b/icons/align-left.svg
diff --git a/icons/align-right.svg b/icons/align-right.svg
diff --git a/icons/announcement.svg b/icons/announcement.svg
diff --git a/icons/archive.svg b/icons/archive.svg
diff --git a/icons/arrow-down.svg b/icons/arrow-down.svg
diff --git a/icons/arrow-left.svg b/icons/arrow-left.svg
diff --git a/icons/arrow-right.svg b/icons/arrow-right.svg
diff --git a/icons/arrow-up.svg b/icons/arrow-up.svg
diff --git a/icons/arrows.svg b/icons/arrows.svg