diff --git a/dist/css/icon.gl.css b/dist/css/icon.gl.css deleted file mode 100644 index dd8aa44f..00000000 --- a/dist/css/icon.gl.css +++ /dev/null @@ -1,100 +0,0 @@ -/** -* icon.gl -* -* @description Icon Library -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2023 Scape Agency (https://www.scape.agency) -* @website https://www.icon.gl/ -* @repository https://github.com/scape-agency/icon.gl/ -* @license Apache 2.0 License (https://github.com/scape-agency/icon.gl/blob/main/LICENSE) -*/ -/** -TABLE OF CONTENTS -=============================================================================== -1. -2. -3. -*/ -.igl_1x { - font-size: 1em; -} - -.igl_2x { - font-size: 2em; -} - -.igl_3x { - font-size: 3em; -} - -.igl_4x { - font-size: 4em; -} - -.igl_5x { - font-size: 5em; -} - -.igl_6x { - font-size: 6em; -} - -.igl_7x { - font-size: 7em; -} - -.igl_8x { - font-size: 8em; -} - -.igl_9x { - font-size: 9em; -} - -.igl_10x { - font-size: 10em; -} - -.igl_icon-interactive:hover { - color: #0000cc; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - transform: scale(1.1); - transition: all 0.3s ease-in-out; -} -.igl_icon-interactive:focus { - outline: 2px solid #6666ff; -} -.igl_icon-interactive:active { - color: #0000e6; -} -.igl_icon-interactive:disabled { - color: gray; - cursor: not-allowed; -} - -.igl_rotate_90 { - transform: rotate(90deg); -} - -.igl_rotate_180 { - transform: rotate(180deg); -} - -.igl_rotate_270 { - transform: rotate(270deg); -} - -.igl_flip-horizontal { - transform: scale(-1, 1); -} - -.igl_flip-vertical { - transform: scale(1, -1); -} - -.igl_flip-both, -.igl_flip-horizontal.igl_flip-vertical { - transform: scale(1, -1); -} -/*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/css/icon.gl.css.map b/dist/css/icon.gl.css.map deleted file mode 100644 index e161dd55..00000000 --- a/dist/css/icon.gl.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["%3Cinput%20css%20lxcCnl%3E"],"names":[],"mappings":"AAAA;;;;;;;;;;CAUC;AACD;;;;;;CAMC;AACD;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,cAAc;EACd,wCAAwC;EACxC,qBAAqB;EACrB,gCAAgC;AAClC;AACA;EACE,0BAA0B;AAC5B;AACA;EACE,cAAc;AAChB;AACA;EACE,WAAW;EACX,mBAAmB;AACrB;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;AACzB;;AAEA;;EAEE,uBAAuB;AACzB","file":"to.css","sourcesContent":["/**\n* icon.gl\n*\n* @description Icon Library\n* @author Scape Agency (https://www.scape.agency)\n* @version v1.0.0\n* @copyright 2020-2023 Scape Agency (https://www.scape.agency)\n* @website https://www.icon.gl/\n* @repository https://github.com/scape-agency/icon.gl/\n* @license Apache 2.0 License (https://github.com/scape-agency/icon.gl/blob/main/LICENSE)\n*/\n/**\nTABLE OF CONTENTS\n===============================================================================\n1.\n2.\n3. \n*/\n.igl_1x {\n font-size: 1em;\n}\n\n.igl_2x {\n font-size: 2em;\n}\n\n.igl_3x {\n font-size: 3em;\n}\n\n.igl_4x {\n font-size: 4em;\n}\n\n.igl_5x {\n font-size: 5em;\n}\n\n.igl_6x {\n font-size: 6em;\n}\n\n.igl_7x {\n font-size: 7em;\n}\n\n.igl_8x {\n font-size: 8em;\n}\n\n.igl_9x {\n font-size: 9em;\n}\n\n.igl_10x {\n font-size: 10em;\n}\n\n.igl_icon-interactive:hover {\n color: #0000cc;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n transform: scale(1.1);\n transition: all 0.3s ease-in-out;\n}\n.igl_icon-interactive:focus {\n outline: 2px solid #6666ff;\n}\n.igl_icon-interactive:active {\n color: #0000e6;\n}\n.igl_icon-interactive:disabled {\n color: gray;\n cursor: not-allowed;\n}\n\n.igl_rotate_90 {\n transform: rotate(90deg);\n}\n\n.igl_rotate_180 {\n transform: rotate(180deg);\n}\n\n.igl_rotate_270 {\n transform: rotate(270deg);\n}\n\n.igl_flip-horizontal {\n transform: scale(-1, 1);\n}\n\n.igl_flip-vertical {\n transform: scale(1, -1);\n}\n\n.igl_flip-both,\n.igl_flip-horizontal.igl_flip-vertical {\n transform: scale(1, -1);\n}"]} \ No newline at end of file diff --git a/dist/css/icon.gl.min.css b/dist/css/icon.gl.min.css deleted file mode 100644 index 1f83198c..00000000 --- a/dist/css/icon.gl.min.css +++ /dev/null @@ -1,2 +0,0 @@ -.igl_1x{font-size:1em}.igl_2x{font-size:2em}.igl_3x{font-size:3em}.igl_4x{font-size:4em}.igl_5x{font-size:5em}.igl_6x{font-size:6em}.igl_7x{font-size:7em}.igl_8x{font-size:8em}.igl_9x{font-size:9em}.igl_10x{font-size:10em}.igl_icon-interactive:hover{box-shadow:0 2px 4px rgba(0,0,0,.2);color:#00c;transform:scale(1.1);transition:all .3s ease-in-out}.igl_icon-interactive:focus{outline:2px solid #66f}.igl_icon-interactive:active{color:#0000e6}.igl_icon-interactive:disabled{color:gray;cursor:not-allowed}.igl_rotate_90{transform:rotate(90deg)}.igl_rotate_180{transform:rotate(180deg)}.igl_rotate_270{transform:rotate(270deg)}.igl_flip-horizontal{transform:scaleX(-1)}.igl_flip-both,.igl_flip-horizontal.igl_flip-vertical,.igl_flip-vertical{transform:scaleY(-1)} -/*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/css/icon.gl.min.css.map b/dist/css/icon.gl.min.css.map deleted file mode 100644 index ba22305a..00000000 --- a/dist/css/icon.gl.min.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["%3Cinput%20css%208uLBf_%3E"],"names":[],"mappings":"AAAA,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,QAAQ,aAAa,CAAC,SAAS,cAAc,CAAC,4BAAuC,mCAAmC,CAA9C,UAAU,CAAqC,oBAAoB,CAAC,8BAA8B,CAAC,4BAA4B,sBAAsB,CAAC,6BAA6B,aAAa,CAAC,+BAA+B,UAAU,CAAC,kBAAkB,CAAC,eAAe,uBAAuB,CAAC,gBAAgB,wBAAwB,CAAC,gBAAgB,wBAAwB,CAAC,qBAAqB,oBAAsB,CAA2C,yEAAsD,oBAAsB","file":"to.css","sourcesContent":[".igl_1x{font-size:1em}.igl_2x{font-size:2em}.igl_3x{font-size:3em}.igl_4x{font-size:4em}.igl_5x{font-size:5em}.igl_6x{font-size:6em}.igl_7x{font-size:7em}.igl_8x{font-size:8em}.igl_9x{font-size:9em}.igl_10x{font-size:10em}.igl_icon-interactive:hover{color:#00c;box-shadow:0 2px 4px rgba(0,0,0,.2);transform:scale(1.1);transition:all .3s ease-in-out}.igl_icon-interactive:focus{outline:2px solid #66f}.igl_icon-interactive:active{color:#0000e6}.igl_icon-interactive:disabled{color:gray;cursor:not-allowed}.igl_rotate_90{transform:rotate(90deg)}.igl_rotate_180{transform:rotate(180deg)}.igl_rotate_270{transform:rotate(270deg)}.igl_flip-horizontal{transform:scale(-1, 1)}.igl_flip-vertical{transform:scale(1, -1)}.igl_flip-both,.igl_flip-horizontal.igl_flip-vertical{transform:scale(1, -1)}"]} \ No newline at end of file diff --git a/dist/font/icon.gl.css b/dist/font/icon.gl.css deleted file mode 100644 index 65073416..00000000 --- a/dist/font/icon.gl.css +++ /dev/null @@ -1,29 +0,0 @@ -@font-face { - font-family: "icon.gl"; - src: url("./fonts/icon.gl.ttf?e502468a16b65d541fdb879de8121f2b") format("truetype"), -url("./fonts/icon.gl.woff?e502468a16b65d541fdb879de8121f2b") format("woff"), -url("./fonts/icon.gl.woff2?e502468a16b65d541fdb879de8121f2b") format("woff2"), -url("./fonts/icon.gl.eot?e502468a16b65d541fdb879de8121f2b#iefix") format("embedded-opentype"), -url("./fonts/icon.gl.svg?e502468a16b65d541fdb879de8121f2b#icon.gl") format("svg"); -} - -.igl:before { - font-family: icon.gl !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.igl.igl-admin:before { - content: "\f101"; -} -.igl.igl-api:before { - content: "\f102"; -} -.igl.igl-home:before { - content: "\f103"; -} diff --git a/dist/font/icon.gl.eot b/dist/font/icon.gl.eot deleted file mode 100644 index 7aa4623a..00000000 Binary files a/dist/font/icon.gl.eot and /dev/null differ diff --git a/dist/font/icon.gl.html b/dist/font/icon.gl.html deleted file mode 100644 index f5179f90..00000000 --- a/dist/font/icon.gl.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - icon.gl - - - - - - - -

icon.gl

- - -
- - - -
- admin -
- - -
- - - -
- api -
- - -
- - - -
- home -
- - - - diff --git a/dist/font/icon.gl.json b/dist/font/icon.gl.json deleted file mode 100644 index 20a1a3cf..00000000 --- a/dist/font/icon.gl.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "admin": 61697, - "api": 61698, - "home": 61699 -} \ No newline at end of file diff --git a/dist/font/icon.gl.sass b/dist/font/icon.gl.sass deleted file mode 100644 index f46c51c4..00000000 --- a/dist/font/icon.gl.sass +++ /dev/null @@ -1,33 +0,0 @@ -$icon.gl-font: "icon.gl" - -@font-face - font-family: $icon.gl-font - src: url("./fonts/icon.gl.ttf?e502468a16b65d541fdb879de8121f2b") format("truetype"), -url("./fonts/icon.gl.woff?e502468a16b65d541fdb879de8121f2b") format("woff"), -url("./fonts/icon.gl.woff2?e502468a16b65d541fdb879de8121f2b") format("woff2"), -url("./fonts/icon.gl.eot?e502468a16b65d541fdb879de8121f2b#iefix") format("embedded-opentype"), -url("./fonts/icon.gl.svg?e502468a16b65d541fdb879de8121f2b#icon.gl") format("svg") - -.igl:before - font-family: icon.gl !important - font-style: normal - font-weight: normal !important - font-variant: normal - text-transform: none - line-height: 1 - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - - -$icon.gl-map: ( - "admin": "\f101", - "api": "\f102", - "home": "\f103", -) - -.igl.igl-admin:before - content: map-get($icon.gl-map, "admin") -.igl.igl-api:before - content: map-get($icon.gl-map, "api") -.igl.igl-home:before - content: map-get($icon.gl-map, "home") diff --git a/dist/font/icon.gl.scss b/dist/font/icon.gl.scss deleted file mode 100644 index 9a008b92..00000000 --- a/dist/font/icon.gl.scss +++ /dev/null @@ -1,37 +0,0 @@ -$icon.gl-font: "icon.gl"; - -@font-face { - font-family: $icon.gl-font; - src: url("./fonts/icon.gl.ttf?e502468a16b65d541fdb879de8121f2b") format("truetype"), -url("./fonts/icon.gl.woff?e502468a16b65d541fdb879de8121f2b") format("woff"), -url("./fonts/icon.gl.woff2?e502468a16b65d541fdb879de8121f2b") format("woff2"), -url("./fonts/icon.gl.eot?e502468a16b65d541fdb879de8121f2b#iefix") format("embedded-opentype"), -url("./fonts/icon.gl.svg?e502468a16b65d541fdb879de8121f2b#icon.gl") format("svg"); -} - -.igl:before { - font-family: icon.gl !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -$icon.gl-map: ( - "admin": "\f101", - "api": "\f102", - "home": "\f103", -); - -.igl.igl-admin:before { - content: map-get($icon.gl-map, "admin"); -} -.igl.igl-api:before { - content: map-get($icon.gl-map, "api"); -} -.igl.igl-home:before { - content: map-get($icon.gl-map, "home"); -} diff --git a/dist/font/icon.gl.svg b/dist/font/icon.gl.svg deleted file mode 100644 index 3037a6a7..00000000 --- a/dist/font/icon.gl.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - diff --git a/dist/font/icon.gl.ts b/dist/font/icon.gl.ts deleted file mode 100644 index 9cd118af..00000000 --- a/dist/font/icon.gl.ts +++ /dev/null @@ -1,21 +0,0 @@ -export type IconGlId = - | "admin" - | "api" - | "home"; - -export type IconGlKey = - | "Admin" - | "Api" - | "Home"; - -export enum IconGl { - Admin = "admin", - Api = "api", - Home = "home", -} - -export const ICON_GL_CODEPOINTS: { [key in IconGl]: string } = { - [IconGl.Admin]: "61697", - [IconGl.Api]: "61698", - [IconGl.Home]: "61699", -}; diff --git a/dist/font/icon.gl.ttf b/dist/font/icon.gl.ttf deleted file mode 100644 index 7c5afccf..00000000 Binary files a/dist/font/icon.gl.ttf and /dev/null differ diff --git a/dist/font/icon.gl.woff b/dist/font/icon.gl.woff deleted file mode 100644 index 2c3d7cea..00000000 Binary files a/dist/font/icon.gl.woff and /dev/null differ diff --git a/dist/font/icon.gl.woff2 b/dist/font/icon.gl.woff2 deleted file mode 100644 index df358de3..00000000 Binary files a/dist/font/icon.gl.woff2 and /dev/null differ diff --git a/dist/icons.json b/dist/icons.json deleted file mode 100644 index ebcd7124..00000000 --- a/dist/icons.json +++ /dev/null @@ -1,5 +0,0 @@ -[ - "home", - "api", - "admin" -] \ No newline at end of file diff --git a/dist/scss/_animate.scss b/dist/scss/_animate.scss index 0a992b34..84b00e27 100644 --- a/dist/scss/_animate.scss +++ b/dist/scss/_animate.scss @@ -115,9 +115,6 @@ } - - - .#{$icongl_prefix}animation_beat_fade { @include animation_base; animation-name: animation_beat_fade; @@ -136,10 +133,10 @@ } } + // Bounce // ---------------------------------------------------------------------------- - @mixin animation_bounce( $duration: 1s, $timing-function: cubic-bezier(0.280, 0.840, 0.420, 1), diff --git a/dist/scss/_button.scss b/dist/scss/_button.scss index fb35653b..1358bf5b 100644 --- a/dist/scss/_button.scss +++ b/dist/scss/_button.scss @@ -1,50 +1,50 @@ $main-color: #some-color; // Replace #some-color with the actual color value .btn { - display: inline-block; - padding: 6px 12px; - font-size: 18px; - font-weight: 400; - line-height: 1.42857143; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-radius: 4px; - color: white; - background-color: $main-color; + display: inline-block; + padding: 6px 12px; + font-size: 18px; + font-weight: 400; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-radius: 4px; + color: white; + background-color: $main-color; } @mixin icon-button($size: 40px, $bg-color: #f5f5f5, $hover-color: darken($bg-color, 10%)) { - display: inline-flex; - align-items: center; - justify-content: center; - width: $size; - height: $size; - background-color: $bg-color; - border: none; - border-radius: 50%; - cursor: pointer; - transition: background-color 0.3s; + display: inline-flex; + align-items: center; + justify-content: center; + width: $size; + height: $size; + background-color: $bg-color; + border: none; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s; - &:hover { - background-color: $hover-color; - } + &:hover { + background-color: $hover-color; + } - // Icon size can be adjusted relative to the button size - i { - font-size: calc($size * 0.6); - } + // Icon size can be adjusted relative to the button size + i { + font-size: calc($size * 0.6); + } } .icon-btn { - @include icon-button(40px, #f5f5f5); + @include icon-button(40px, #f5f5f5); } diff --git a/dist/scss/_effect.scss b/dist/scss/_effect.scss new file mode 100644 index 00000000..a1012b3e --- /dev/null +++ b/dist/scss/_effect.scss @@ -0,0 +1,69 @@ + +// /* icon hover effect style 1 */ +// .social-icon-style-1 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; color: #fff} +// .social-icon-style-1 a:hover {border-radius: 100%;} + +// /* icon hover effect style 2 */ +// .social-icon-style-2 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; border-radius: 100%; color: #fff} +// .social-icon-style-2 a:hover {border-radius: 0;} + +// /* icon hover effect style 3 */ +// .social-icon-style-3 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; border-radius: 100%; color: #fff} +// .social-icon-style-3 a:hover i{transition: transform 0.4s ease-out; -webkit-transition: transform 0.4s ease-out; -moz-transition: transform 0.4s ease-out; -ms-transition: transform 0.4s ease-out; -o-transition: transform 0.4s ease-out; transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg);} + +// /* icon hover effect style 4 */ +// .social-icon-style-4 a {text-align: center; display:inline-block; border-radius: 100%; position: relative; border: 1px solid rgba(0, 0, 0, 0.1); color: #232323; text-align: center; z-index: 1;} +// .social-icon-style-4 a:hover {color: #fff;} +// .social-icon-style-4 a span {border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; width: 0;z-index: -1;} +// .social-icon-style-4 a:hover span{width:100%; height:100%; border-radius: 100%; top: 0; left: 0;} + +// /* icon hover effect style 5 */ +// .social-icon-style-5 a {text-align: center; display:inline-block; color: #232323} +// .social-icon-style-5 a:hover {color: #fff; border-radius: 100%; background-color: var(--base-color)} + +// /* icon hover effect style 5 light*/ +// .social-icon-style-5-light a {text-align: center; display:inline-block;color: #fff} +// .social-icon-style-5-light a:hover {color: #fff; border-radius: 100%; background-color: var(--base-color)} + +// /* icon hover effect style 6 */ +// .social-icon-style-6 a {text-align: center; display:inline-block;border: 1px solid rgba(0,0,0,0.1);color: #232323; background-color: transparent; border-radius: 100%;} +// .social-icon-style-6 a:hover {border-color: var(--base-color); color: var(--base-color); background-color: transparent;} + +// /* icon hover effect style 7 */ +// .social-icon-style-7 a {text-align: center; display:inline-block; border-radius: 100%; color: #232323; background-color: #fff;} +// .social-icon-style-7 a:hover {color: #fff; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); -o-transform: scale(1.2);} + +// /* icon hover effect style 8 */ +// .social-icon-style-8 ul li a {text-align: center; width: auto; height: auto} +// .social-icon-style-8 a:hover {color: var(--base-color) !important;} + +// /* icon hover effect style 9 */ +// .social-icon-style-9 ul li a {text-align: center; width: auto; height: auto} + +// /* social icon style */ +// .social-icon-style-9 a.facebook:hover {color: #3b5998;} +// .social-icon-style-9 a.twitter:hover {color: #00aced;} +// .social-icon-style-9 a.google:hover {color: #dc4a38;} +// .social-icon-style-9 a.dribbble:hover {color: #ea4c89;} +// .social-icon-style-9 a.youtube:hover {color: #bb0000;} +// .social-icon-style-9 a.linkedin:hover {color: #007bb6;} +// .social-icon-style-9 a.pinterest:hover {color: #CB2027} +// .social-icon-style-9 a.email:hover {color: #7d7d7d} +// .social-icon-style-9 a.sms:hover {color: #ffbd00} +// .social-icon-style-9 a.sharethis:hover {color: #95D03A} +// .social-icon-style-9 a.reddit:hover {color: #ff4500} +// .social-icon-style-9 a.tumblr:hover {color: #32506d} +// .social-icon-style-9 a.digg:hover {color: #262626} +// .social-icon-style-9 a.stumbleupon:hover {color: #eb4924} +// .social-icon-style-9 a.whatsapp:hover {color: #25d366} +// .social-icon-style-9 a.vk:hover {color: #4c6c91} +// .social-icon-style-9 a.weibo:hover {color: #ff9933} +// .social-icon-style-9 a.odnoklassniki:hover {color: #d7772d} +// .social-icon-style-9 a.xing:hover {color: #1a7576} +// .social-icon-style-9 a.print:hover {color: #222222} +// .social-icon-style-9 a.blogger:hover {color: #ff8000} +// .social-icon-style-9 a.flipboard:hover {color: #e12828} +// .social-icon-style-9 a.meneame:hover {color: #ff6400} +// .social-icon-style-9 a.mailru:hover {color: #168de2} +// .social-icon-style-9 a.delicious:hover {color: #205cc0} +// .social-icon-style-9 a.livejournal:hover {color: #00b0ea} \ No newline at end of file diff --git a/dist/scss/_figure.scss b/dist/scss/_figure.scss new file mode 100644 index 00000000..cee211dc --- /dev/null +++ b/dist/scss/_figure.scss @@ -0,0 +1,42 @@ + +$main-color: #your-color; // Replace #your-color with the actual color value + +.si-figure { + padding: 5px 0; + position: relative; + display: inline-block; + margin: 0; + background-color: #f9f9f9; + outline: 1px solid white; + height: 100px; + color: #999; + vertical-align: top; + text-align: center; + font-size: 14px; + cursor: pointer; + + svg { + width: 50px; + height: 50px; + fill: gray; + } + + &:hover { + background-color: #dfd; + color: $main-color; + + svg { + fill: $main-color; + } + } + + &.selected { + background-color: $main-color; + color: white; + opacity: .9; + + svg { + fill: orange; + } + } +} \ No newline at end of file diff --git a/dist/scss/_icon.scss b/dist/scss/_icon.scss index 1466648b..7f0be259 100644 --- a/dist/scss/_icon.scss +++ b/dist/scss/_icon.scss @@ -76,97 +76,7 @@ svg-icon { } -@mixin icon_size_00 { - @include icon; - @include box_size_00; - svg { @include box_size_00; } - img { @include box_size_00; } -} - -@mixin icon_size_01 { - @include icon; - @include box_size_01; - svg { @include box_size_01; } - img { @include box_size_01; } -} - -@mixin icon_size_02 { - @include icon; - @include box_size_02; - svg { @include box_size_02; } - img { @include box_size_02; } -} - -@mixin icon_size_03 { - @include icon; - @include box_size_03; - svg { @include box_size_03; } - img { @include box_size_03; } -} - -@mixin icon_size_04 { - @include icon; - @include box_size_04; - svg { @include box_size_04; } - img { @include box_size_04; } -} - -@mixin icon_size_05 { - @include icon; - @include box_size_05; - svg { @include box_size_05; } - img { @include box_size_05; } -} - -@mixin icon_size_06 { - @include icon; - @include box_size_06; - svg { @include box_size_06; } - img { @include box_size_06; } -} - -@mixin icon_size_07 { - @include icon; - @include box_size_07; - svg { @include box_size_07; } - img { @include box_size_07; } -} - -@mixin icon_size_08 { - @include icon; - @include box_size_08; - svg { @include box_size_08; } - img { @include box_size_08; } -} - -@mixin icon_size_09 { - @include icon; - @include box_size_09; - svg { @include box_size_09; } - img { @include box_size_09; } -} - -@mixin icon_size_10 { - @include icon; - @include box_size_10; - svg { @include box_size_10; } - img { @include box_size_10; } -} - - .icon { @include icon; } -.icon_size_00 { @include icon_size_00; } -.icon_size_01 { @include icon_size_01; } -.icon_size_02 { @include icon_size_02; } -.icon_size_03 { @include icon_size_03; } -.icon_size_04 { @include icon_size_04; } -.icon_size_05 { @include icon_size_05; } -.icon_size_06 { @include icon_size_06; } -.icon_size_07 { @include icon_size_07; } -.icon_size_08 { @include icon_size_08; } -.icon_size_09 { @include icon_size_09; } -.icon_size_10 { @include icon_size_10; } - .footer_social_icon { @@ -192,11 +102,6 @@ svg-icon { } -// $icon-dimensions: 1.5rem !default -// $icon-dimensions-small: 1rem !default -// $icon-dimensions-medium: 2rem !default -// $icon-dimensions-large: 3rem !default -// $icon-text-spacing: 0.25em !default // .icon // align-items: center @@ -246,14 +151,6 @@ svg-icon { // 17. Icon // ====================================== */ -// /* icon size */ -// .icon-very-small {font-size: 16px} -// .icon-small {font-size: 24px} -// .icon-medium {font-size: 35px} -// .icon-extra-medium {font-size: 40px} -// .icon-large {font-size: 50px} -// .icon-round-small {border-radius: 100%; display: table-cell; height: 80px; margin: 0 auto; text-align: center; vertical-align: middle; width: 80px; font-size:32px} -// .icon-round-medium {border-radius: 100%; display: table-cell; height: 90px; margin: 0 auto; text-align: center; vertical-align: middle; width: 90px;} // /* social media icon */ // .icon-social-very-small {font-size: 12px} @@ -280,178 +177,14 @@ svg-icon { // .large-icon a {font-size: 24px; width: 60px; height: 60px;line-height: 61px;} // .extra-large-icon a {font-size: 30px; width: 70px; height: 70px;line-height: 68px;} -// /* social icon style */ -// .social-icon-style-1 a.facebook,.social-icon-style-2 a.facebook,.social-icon-style-3 a.facebook,.social-icon-style-4 a.facebook span,.social-icon-style-10 a.facebook span {background-color: #3b5998} -// .social-icon-style-1 a.twitter,.social-icon-style-2 a.twitter,.social-icon-style-3 a.twitter,.social-icon-style-4 a.twitter span,.social-icon-style-10 a.twitter span {background-color: #00aced} -// .social-icon-style-1 a.google,.social-icon-style-2 a.google,.social-icon-style-3 a.google,.social-icon-style-4 a.google span,.social-icon-style-10 a.google span {background-color: #dc4a38} -// .social-icon-style-1 a.dribbble,.social-icon-style-2 a.dribbble,.social-icon-style-3 a.dribbble,.social-icon-style-4 a.dribbble span,.social-icon-style-10 a.dribbble span {background-color: #ea4c89} -// .social-icon-style-1 a.youtube,.social-icon-style-2 a.youtube,.social-icon-style-3 a.youtube,.social-icon-style-4 a.youtube span,.social-icon-style-10 a.youtube span {background-color: #bb0000} -// .social-icon-style-1 a.linkedin,.social-icon-style-2 a.linkedin,.social-icon-style-3 a.linkedin,.social-icon-style-4 a.linkedin span,.social-icon-style-10 a.linkedin span {background-color: #007bb6} -// .social-icon-style-1 a.instagram,.social-icon-style-2 a.instagram,.social-icon-style-3 a.instagram,.social-icon-style-4 a.instagram span,.social-icon-style-10 a.instagram span {background-color: #FE1F49} -// .social-icon-style-1 a.pinterest,.social-icon-style-2 a.pinterest,.social-icon-style-3 a.pinterest,.social-icon-style-4 a.pinterest span,.social-icon-style-10 a.pinterest span {background-color: #CB2027} -// .social-icon-style-1 a.flickr,.social-icon-style-2 a.flickr,.social-icon-style-3 a.flickr,.social-icon-style-4 a.flickr span,.social-icon-style-10 a.flickr span {background-color: #ff0084} -// .social-icon-style-1 a.rss,.social-icon-style-2 a.rss,.social-icon-style-3 a.rss,.social-icon-style-4 a.rss span,.social-icon-style-10 a.rss span {background-color: #f2890a} -// .social-icon-style-1 a.behance,.social-icon-style-2 a.behance,.social-icon-style-3 a.behance,.social-icon-style-4 a.behance span,.social-icon-style-10 a.behance span {background-color: #1769ff} -// .social-icon-style-1 a.vine,.social-icon-style-2 a.vine,.social-icon-style-3 a.vine,.social-icon-style-4 a.vine span,.social-icon-style-10 a.vine span {background-color: #00bf8f} -// .social-icon-style-1 a.email,.social-icon-style-2 a.email,.social-icon-style-3 a.email,.social-icon-style-4 a.email span,.social-icon-style-10 a.email span {background-color: #7d7d7d} -// .social-icon-style-1 a.sms,.social-icon-style-2 a.sms,.social-icon-style-3 a.sms,.social-icon-style-4 a.sms span,.social-icon-style-10 a.sms span {background-color: #ffbd00} -// .social-icon-style-1 a.sharethis,.social-icon-style-2 a.sharethis,.social-icon-style-3 a.sharethis,.social-icon-style-4 a.sharethis span,.social-icon-style-10 a.sharethis span {background-color: #95D03A} -// .social-icon-style-1 a.reddit,.social-icon-style-2 a.reddit,.social-icon-style-3 a.reddit,.social-icon-style-4 a.reddit span,.social-icon-style-10 a.reddit span {background-color: #ff4500} -// .social-icon-style-1 a.tumblr,.social-icon-style-2 a.tumblr,.social-icon-style-3 a.tumblr,.social-icon-style-4 a.tumblr span,.social-icon-style-10 a.tumblr span {background-color: #32506d} -// .social-icon-style-1 a.digg,.social-icon-style-2 a.digg,.social-icon-style-3 a.digg,.social-icon-style-4 a.digg span,.social-icon-style-10 a.digg span {background-color: #262626} -// .social-icon-style-1 a.stumbleupon,.social-icon-style-2 a.stumbleupon,.social-icon-style-3 a.stumbleupon,.social-icon-style-4 a.stumbleupon span,.social-icon-style-10 a.stumbleupon span {background-color: #eb4924} -// .social-icon-style-1 a.whatsapp,.social-icon-style-2 a.whatsapp,.social-icon-style-3 a.whatsapp,.social-icon-style-4 a.whatsapp span,.social-icon-style-10 a.whatsapp span {background-color: #25d366} -// .social-icon-style-1 a.vk,.social-icon-style-2 a.vk,.social-icon-style-3 a.vk,.social-icon-style-4 a.vk span,.social-icon-style-10 a.vk span {background-color: #4c6c91} -// .social-icon-style-1 a.weibo,.social-icon-style-2 a.weibo,.social-icon-style-3 a.weibo,.social-icon-style-4 a.weibo span,.social-icon-style-10 a.weibo span {background-color: #ff9933} -// .social-icon-style-1 a.odnoklassniki,.social-icon-style-2 a.odnoklassniki,.social-icon-style-3 a.odnoklassniki,.social-icon-style-4 a.odnoklassniki span,.social-icon-style-10 a.odnoklassniki span {background-color: #d7772d} -// .social-icon-style-1 a.xing,.social-icon-style-2 a.xing,.social-icon-style-3 a.xing,.social-icon-style-4 a.xing span,.social-icon-style-10 a.xing span {background-color: #1a7576} -// .social-icon-style-1 a.print,.social-icon-style-2 a.print,.social-icon-style-3 a.print,.social-icon-style-4 a.print span,.social-icon-style-10 a.print span {background-color: #222222} -// .social-icon-style-1 a.blogger,.social-icon-style-2 a.blogger,.social-icon-style-3 a.blogger,.social-icon-style-4 a.blogger span,.social-icon-style-10 a.blogger span {background-color: #ff8000} -// .social-icon-style-1 a.flipboard,.social-icon-style-2 a.flipboard,.social-icon-style-3 a.flipboard,.social-icon-style-4 a.flipboard span,.social-icon-style-10 a.flipboard span {background-color: #e12828} -// .social-icon-style-1 a.meneame,.social-icon-style-2 a.meneame,.social-icon-style-3 a.meneame,.social-icon-style-4 a.meneame span,.social-icon-style-10 a.meneame span {background-color: #ff6400} -// .social-icon-style-1 a.mailru,.social-icon-style-2 a.mailru,.social-icon-style-3 a.mailru,.social-icon-style-4 a.mailru span,.social-icon-style-10 a.mailru span {background-color: #168de2} -// .social-icon-style-1 a.delicious,.social-icon-style-2 a.delicious,.social-icon-style-3 a.delicious,.social-icon-style-4 a.delicious span,.social-icon-style-10 a.delicious span {background-color: #205cc0} -// .social-icon-style-1 a.livejournal,.social-icon-style-2 a.livejournal,.social-icon-style-3 a.livejournal,.social-icon-style-4 a.livejournal span,.social-icon-style-10 a.livejournal span {background-color: #00b0ea} - -// /* social icon style */ -// .social-icon-style-6 a.facebook:hover {border-color: #3b5998; color: #3b5998} -// .social-icon-style-6 a.twitter:hover {border-color: #00aced; color: #00aced} -// .social-icon-style-6 a.google:hover {border-color: #dc4a38; color: #dc4a38} -// .social-icon-style-6 a.dribbble:hover {border-color: #ea4c89; color: #ea4c89} -// .social-icon-style-6 a.youtube:hover {border-color: #bb0000; color: #bb0000} -// .social-icon-style-6 a.linkedin:hover {border-color: #0077b5; color: #0077b5} -// .social-icon-style-6 a.instagram:hover {border-color: #FE1F49; color: #FE1F49} -// .social-icon-style-6 a.pinterest:hover {border-color: #CB2027; color: #CB2027} -// .social-icon-style-6 a.flickr:hover {border-color: #ff0084; color: #ff0084} -// .social-icon-style-6 a.rss:hover {border-color: #f2890a; color: #f2890a} -// .social-icon-style-6 a.behance:hover {border-color: #1769ff; color: #1769ff} -// .social-icon-style-6 a.vine:hover {border-color: #00bf8f; color: #00bf8f} -// .social-icon-style-6 a.email:hover {border-color: #7d7d7d; color: #7d7d7d} -// .social-icon-style-6 a.sms:hover {border-color: #ffbd00; color: #ffbd00} -// .social-icon-style-6 a.sharethis:hover {border-color: #95D03A; color: #95D03A} -// .social-icon-style-6 a.reddit:hover {border-color: #ff4500; color: #ff4500} -// .social-icon-style-6 a.tumblr:hover {border-color: #32506d; color: #32506d} -// .social-icon-style-6 a.digg:hover {border-color: #262626; color: #262626} -// .social-icon-style-6 a.stumbleupon:hover {border-color: #eb4924; color: #eb4924} -// .social-icon-style-6 a.whatsapp:hover {border-color: #25d366; color: #25d366} -// .social-icon-style-6 a.vk:hover {border-color: #4c6c91; color: #4c6c91} -// .social-icon-style-6 a.weibo:hover {border-color: #ff9933; color: #ff9933} -// .social-icon-style-6 a.odnoklassniki:hover {border-color: #d7772d; color: #d7772d} -// .social-icon-style-6 a.xing:hover {border-color: #1a7576; color: #1a7576} -// .social-icon-style-6 a.print:hover{border-color: #222222; color: #222222} -// .social-icon-style-6 a.blogger:hover {border-color: #ff8000; color: #ff8000} -// .social-icon-style-6 a.flipboard:hover {border-color: #e12828; color: #e12828} -// .social-icon-style-6 a.meneame:hover {border-color: #ff6400; color: #ff6400} -// .social-icon-style-6 a.mailru:hover {border-color: #168de2; color: #168de2} -// .social-icon-style-6 a.delicious:hover {border-color: #205cc0; color: #205cc0} -// .social-icon-style-6 a.livejournal:hover {border-color: #00b0ea; color: #00b0ea} - -// /* social icon style */ -// .social-icon-style-7 a.facebook:hover {border-color: #3b5998; background-color: #3b5998} -// .social-icon-style-7 a.twitter:hover {border-color: #00aced; background-color: #00aced} -// .social-icon-style-7 a.google:hover {border-color: #dc4a38; background-color: #dc4a38} -// .social-icon-style-7 a.dribbble:hover {border-color: #ea4c89; background-color: #ea4c89} -// .social-icon-style-7 a.youtube:hover {border-color: #bb0000; background-color: #bb0000} -// .social-icon-style-7 a.linkedin:hover {border-color: #0077b5; background-color: #0077b5} -// .social-icon-style-7 a.instagram:hover {border-color: #FE1F49; background-color: #FE1F49} -// .social-icon-style-7 a.pinterest:hover {border-color: #CB2027; background-color: #CB2027} -// .social-icon-style-7 a.flickr:hover {border-color: #ff0084; background-color: #ff0084} -// .social-icon-style-7 a.rss:hover {border-color: #f2890a; background-color: #f2890a} -// .social-icon-style-7 a.behance:hover {border-color: #1769ff; background-color: #1769ff} -// .social-icon-style-7 a.vine:hover {border-color: #00bf8f; background-color: #00bf8f} -// .social-icon-style-7 a.email:hover {border-color: #7d7d7d; background-color: #7d7d7d} -// .social-icon-style-7 a.sms:hover {border-color: #ffbd00; background-color: #ffbd00} -// .social-icon-style-7 a.sharethis:hover {border-color: #95D03A; background-color: #95D03A} -// .social-icon-style-7 a.reddit:hover {border-color: #ff4500; background-color: #ff4500} -// .social-icon-style-7 a.tumblr:hover {border-color: #32506d; background-color: #32506d} -// .social-icon-style-7 a.digg:hover {border-color: #262626; background-color: #262626} -// .social-icon-style-7 a.stumbleupon:hover {border-color: #eb4924; background-color: #eb4924} -// .social-icon-style-7 a.whatsapp:hover {border-color: #25d366; background-color: #25d366} -// .social-icon-style-7 a.vk:hover {border-color: #4c6c91; background-color: #4c6c91} -// .social-icon-style-7 a.weibo:hover {border-color: #ff9933; background-color: #ff9933} -// .social-icon-style-7 a.odnoklassniki:hover {border-color: #d7772d; background-color: #d7772d} -// .social-icon-style-7 a.xing:hover {border-color: #1a7576; background-color: #1a7576} -// .social-icon-style-7 a.print:hover{border-color: #222222; background-color: #222222} -// .social-icon-style-7 a.blogger:hover {border-color: #ff8000; background-color: #ff8000} -// .social-icon-style-7 a.flipboard:hover {border-color: #e12828; background-color: #e12828} -// .social-icon-style-7 a.meneame:hover {border-color: #ff6400; background-color: #ff6400} -// .social-icon-style-7 a.mailru:hover {border-color: #168de2; background-color: #168de2} -// .social-icon-style-7 a.delicious:hover {border-color: #205cc0; background-color: #205cc0} -// .social-icon-style-7 a.livejournal:hover {border-color: #00b0ea; background-color: #00b0ea} + + // /* icon like counter */ // a.likes-count {padding: 0 15px; width: auto; border-radius: 30px !important;} // a.likes-count i {margin-right: 8px;} // a.likes-count span {position: relative; top: -1px} -// /* icon hover effect style 1 */ -// .social-icon-style-1 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; color: #fff} -// .social-icon-style-1 a:hover {border-radius: 100%;} - -// /* icon hover effect style 2 */ -// .social-icon-style-2 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; border-radius: 100%; color: #fff} -// .social-icon-style-2 a:hover {border-radius: 0;} - -// /* icon hover effect style 3 */ -// .social-icon-style-3 a {text-align: center; display:inline-block; transition: all 400ms; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; border-radius: 100%; color: #fff} -// .social-icon-style-3 a:hover i{transition: transform 0.4s ease-out; -webkit-transition: transform 0.4s ease-out; -moz-transition: transform 0.4s ease-out; -ms-transition: transform 0.4s ease-out; -o-transition: transform 0.4s ease-out; transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg);} - -// /* icon hover effect style 4 */ -// .social-icon-style-4 a {text-align: center; display:inline-block; border-radius: 100%; position: relative; border: 1px solid rgba(0, 0, 0, 0.1); color: #232323; text-align: center; z-index: 1;} -// .social-icon-style-4 a:hover {color: #fff;} -// .social-icon-style-4 a span {border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; width: 0;z-index: -1;} -// .social-icon-style-4 a:hover span{width:100%; height:100%; border-radius: 100%; top: 0; left: 0;} - -// /* icon hover effect style 5 */ -// .social-icon-style-5 a {text-align: center; display:inline-block; color: #232323} -// .social-icon-style-5 a:hover {color: #fff; border-radius: 100%; background-color: var(--base-color)} - -// /* icon hover effect style 5 light*/ -// .social-icon-style-5-light a {text-align: center; display:inline-block;color: #fff} -// .social-icon-style-5-light a:hover {color: #fff; border-radius: 100%; background-color: var(--base-color)} - -// /* icon hover effect style 6 */ -// .social-icon-style-6 a {text-align: center; display:inline-block;border: 1px solid rgba(0,0,0,0.1);color: #232323; background-color: transparent; border-radius: 100%;} -// .social-icon-style-6 a:hover {border-color: var(--base-color); color: var(--base-color); background-color: transparent;} - -// /* icon hover effect style 7 */ -// .social-icon-style-7 a {text-align: center; display:inline-block; border-radius: 100%; color: #232323; background-color: #fff;} -// .social-icon-style-7 a:hover {color: #fff; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); -o-transform: scale(1.2);} - -// /* icon hover effect style 8 */ -// .social-icon-style-8 ul li a {text-align: center; width: auto; height: auto} -// .social-icon-style-8 a:hover {color: var(--base-color) !important;} - -// /* icon hover effect style 9 */ -// .social-icon-style-9 ul li a {text-align: center; width: auto; height: auto} - -// /* social icon style */ -// .social-icon-style-9 a.facebook:hover {color: #3b5998;} -// .social-icon-style-9 a.twitter:hover {color: #00aced;} -// .social-icon-style-9 a.google:hover {color: #dc4a38;} -// .social-icon-style-9 a.dribbble:hover {color: #ea4c89;} -// .social-icon-style-9 a.youtube:hover {color: #bb0000;} -// .social-icon-style-9 a.linkedin:hover {color: #007bb6;} -// .social-icon-style-9 a.pinterest:hover {color: #CB2027} -// .social-icon-style-9 a.email:hover {color: #7d7d7d} -// .social-icon-style-9 a.sms:hover {color: #ffbd00} -// .social-icon-style-9 a.sharethis:hover {color: #95D03A} -// .social-icon-style-9 a.reddit:hover {color: #ff4500} -// .social-icon-style-9 a.tumblr:hover {color: #32506d} -// .social-icon-style-9 a.digg:hover {color: #262626} -// .social-icon-style-9 a.stumbleupon:hover {color: #eb4924} -// .social-icon-style-9 a.whatsapp:hover {color: #25d366} -// .social-icon-style-9 a.vk:hover {color: #4c6c91} -// .social-icon-style-9 a.weibo:hover {color: #ff9933} -// .social-icon-style-9 a.odnoklassniki:hover {color: #d7772d} -// .social-icon-style-9 a.xing:hover {color: #1a7576} -// .social-icon-style-9 a.print:hover {color: #222222} -// .social-icon-style-9 a.blogger:hover {color: #ff8000} -// .social-icon-style-9 a.flipboard:hover {color: #e12828} -// .social-icon-style-9 a.meneame:hover {color: #ff6400} -// .social-icon-style-9 a.mailru:hover {color: #168de2} -// .social-icon-style-9 a.delicious:hover {color: #205cc0} -// .social-icon-style-9 a.livejournal:hover {color: #00b0ea} // /* icon hover effect style 10 light */ // .social-icon-style-10 {position: relative;} @@ -461,41 +194,6 @@ svg-icon { // .social-icon-style-10 a span {border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; width: 0;} // .social-icon-style-10 a:hover span{width:100%; height:100%; border-radius: 100%; top: 0; left: 0;} -// /* social icon style */ -// .social-icon-style-11 {position: relative;} -// .social-icon-style-11 a {text-align: center; display:inline-block; border-radius: 100%; position: relative; text-align: center} -// .social-icon-style-11 a.facebook {color: #3b5998} -// .social-icon-style-11 a.twitter {color: #00aced} -// .social-icon-style-11 a.google {color: #dc4a38} -// .social-icon-style-11 a.dribbble {color: #ea4c89} -// .social-icon-style-11 a.youtube {color: #bb0000} -// .social-icon-style-11 a.linkedin {color: #0077b5} -// .social-icon-style-11 a.instagram {color: #FE1F49} -// .social-icon-style-11 a.pinterest {color: #CB2027} -// .social-icon-style-11 a.flickr {color: #ff0084} -// .social-icon-style-11 a.rss {color: #f2890a} -// .social-icon-style-11 a.behance {color: #1769ff} -// .social-icon-style-11 a.vine {color: #00bf8f} -// .social-icon-style-11 a.email {color: #7d7d7d} -// .social-icon-style-11 a.sms {color: #ffbd00} -// .social-icon-style-11 a.sharethis {color: #95D03A} -// .social-icon-style-11 a.reddit {color: #ff4500} -// .social-icon-style-11 a.tumblr {color: #32506d} -// .social-icon-style-11 a.digg {color: #262626} -// .social-icon-style-11 a.stumbleupon {color: #eb4924} -// .social-icon-style-11 a.whatsapp {color: #25d366} -// .social-icon-style-11 a.vk {color: #4c6c91} -// .social-icon-style-11 a.weibo {color: #ff9933} -// .social-icon-style-11 a.odnoklassniki {color: #d7772d} -// .social-icon-style-11 a.xing {color: #1a7576} -// .social-icon-style-11 a.print{color: #222222} -// .social-icon-style-11 a.blogger {color: #ff8000} -// .social-icon-style-11 a.flipboard {color: #e12828} -// .social-icon-style-11 a.meneame {color: #ff6400} -// .social-icon-style-11 a.mailru {color: #168de2} -// .social-icon-style-11 a.delicious {color: #205cc0} -// .social-icon-style-11 a.livejournal {color: #00b0ea} -// .social-icon-style-11 a:hover {color: #fff;} // footer .small-icon li {margin: 0 8px;} @@ -508,76 +206,3 @@ svg-icon { // .icon-country.france {background:url("../images/country-flag-16X16/france.png")} - - -$main-color: #your-color; // Replace #your-color with the actual color value - -.si-figure { - padding: 5px 0; - position: relative; - display: inline-block; - margin: 0; - background-color: #f9f9f9; - outline: 1px solid white; - height: 100px; - color: #999; - vertical-align: top; - text-align: center; - font-size: 14px; - cursor: pointer; - - svg { - width: 50px; - height: 50px; - fill: gray; - } - - &:hover { - background-color: #dfd; - color: $main-color; - - svg { - fill: $main-color; - } - } - - &.selected { - background-color: $main-color; - color: white; - opacity: .9; - - svg { - fill: orange; - } - } -} - -@media only screen and (min-width: 768px) { - .si-figure { - width: 12.5%; - } -} - -@media only screen and (max-width: 768px) { - .si-figure { - width: 25%; - } -} - -@media only screen and (max-width: 480px) { - .si-figure { - width: 50%; - } -} - -.si { - &.inline { - height: 1.2em; - width: 1.2em; - vertical-align: sub; - } - - &.white { - fill: white; - } -} diff --git a/dist/scss/_inline.scss b/dist/scss/_inline.scss new file mode 100644 index 00000000..d1434bd6 --- /dev/null +++ b/dist/scss/_inline.scss @@ -0,0 +1,24 @@ +.si { + &.inline { + height: 1.2em; + width: 1.2em; + vertical-align: sub; + } + &.white { + fill: white; + } + } + + + .si { + &.inline { + height: 1.2em; + width: 1.2em; + vertical-align: sub; + } + + &.white { + fill: white; + } + } + \ No newline at end of file diff --git a/dist/scss/_media.scss b/dist/scss/_media.scss new file mode 100644 index 00000000..f288363f --- /dev/null +++ b/dist/scss/_media.scss @@ -0,0 +1,17 @@ +@media only screen and (min-width: 768px) { + .si-figure { + width: 12.5%; + } +} + +@media only screen and (max-width: 768px) { + .si-figure { + width: 25%; + } +} + +@media only screen and (max-width: 480px) { + .si-figure { + width: 50%; +} +} diff --git a/dist/scss/_size.scss b/dist/scss/_size.scss index d024cd70..fe370a92 100644 --- a/dist/scss/_size.scss +++ b/dist/scss/_size.scss @@ -51,4 +51,111 @@ $igl_sizes: ( // .#{$icongl_prefix}#{$size} { // @include igl_size($value); // } -// } \ No newline at end of file +// } + +// $icon-dimensions: 1.5rem !default +// $icon-dimensions-small: 1rem !default +// $icon-dimensions-medium: 2rem !default +// $icon-dimensions-large: 3rem !default +// $icon-text-spacing: 0.25em !default + + +// /* icon size */ +// .icon-very-small {font-size: 16px} +// .icon-small {font-size: 24px} +// .icon-medium {font-size: 35px} +// .icon-extra-medium {font-size: 40px} +// .icon-large {font-size: 50px} +// .icon-round-small {border-radius: 100%; display: table-cell; height: 80px; margin: 0 auto; text-align: center; vertical-align: middle; width: 80px; font-size:32px} +// .icon-round-medium {border-radius: 100%; display: table-cell; height: 90px; margin: 0 auto; text-align: center; vertical-align: middle; width: 90px;} + + +@mixin icon_size_00 { + @include icon; + @include box_size_00; + svg { @include box_size_00; } + img { @include box_size_00; } +} + +@mixin icon_size_01 { + @include icon; + @include box_size_01; + svg { @include box_size_01; } + img { @include box_size_01; } +} + +@mixin icon_size_02 { + @include icon; + @include box_size_02; + svg { @include box_size_02; } + img { @include box_size_02; } +} + +@mixin icon_size_03 { + @include icon; + @include box_size_03; + svg { @include box_size_03; } + img { @include box_size_03; } +} + +@mixin icon_size_04 { + @include icon; + @include box_size_04; + svg { @include box_size_04; } + img { @include box_size_04; } +} + +@mixin icon_size_05 { + @include icon; + @include box_size_05; + svg { @include box_size_05; } + img { @include box_size_05; } +} + +@mixin icon_size_06 { + @include icon; + @include box_size_06; + svg { @include box_size_06; } + img { @include box_size_06; } +} + +@mixin icon_size_07 { + @include icon; + @include box_size_07; + svg { @include box_size_07; } + img { @include box_size_07; } +} + +@mixin icon_size_08 { + @include icon; + @include box_size_08; + svg { @include box_size_08; } + img { @include box_size_08; } +} + +@mixin icon_size_09 { + @include icon; + @include box_size_09; + svg { @include box_size_09; } + img { @include box_size_09; } +} + +@mixin icon_size_10 { + @include icon; + @include box_size_10; + svg { @include box_size_10; } + img { @include box_size_10; } +} + + +.icon_size_00 { @include icon_size_00; } +.icon_size_01 { @include icon_size_01; } +.icon_size_02 { @include icon_size_02; } +.icon_size_03 { @include icon_size_03; } +.icon_size_04 { @include icon_size_04; } +.icon_size_05 { @include icon_size_05; } +.icon_size_06 { @include icon_size_06; } +.icon_size_07 { @include icon_size_07; } +.icon_size_08 { @include icon_size_08; } +.icon_size_09 { @include icon_size_09; } +.icon_size_10 { @include icon_size_10; } diff --git a/dist/scss/_social.scss b/dist/scss/_social.scss new file mode 100644 index 00000000..3a84adbb --- /dev/null +++ b/dist/scss/_social.scss @@ -0,0 +1,136 @@ + +// /* social icon style */ + +// .social-icon-style-11 {position: relative;} +// .social-icon-style-11 a {text-align: center; display:inline-block; border-radius: 100%; position: relative; text-align: center} +// .social-icon-style-11 a.facebook {color: #3b5998} +// .social-icon-style-11 a.twitter {color: #00aced} +// .social-icon-style-11 a.google {color: #dc4a38} +// .social-icon-style-11 a.dribbble {color: #ea4c89} +// .social-icon-style-11 a.youtube {color: #bb0000} +// .social-icon-style-11 a.linkedin {color: #0077b5} +// .social-icon-style-11 a.instagram {color: #FE1F49} +// .social-icon-style-11 a.pinterest {color: #CB2027} +// .social-icon-style-11 a.flickr {color: #ff0084} +// .social-icon-style-11 a.rss {color: #f2890a} +// .social-icon-style-11 a.behance {color: #1769ff} +// .social-icon-style-11 a.vine {color: #00bf8f} +// .social-icon-style-11 a.email {color: #7d7d7d} +// .social-icon-style-11 a.sms {color: #ffbd00} +// .social-icon-style-11 a.sharethis {color: #95D03A} +// .social-icon-style-11 a.reddit {color: #ff4500} +// .social-icon-style-11 a.tumblr {color: #32506d} +// .social-icon-style-11 a.digg {color: #262626} +// .social-icon-style-11 a.stumbleupon {color: #eb4924} +// .social-icon-style-11 a.whatsapp {color: #25d366} +// .social-icon-style-11 a.vk {color: #4c6c91} +// .social-icon-style-11 a.weibo {color: #ff9933} +// .social-icon-style-11 a.odnoklassniki {color: #d7772d} +// .social-icon-style-11 a.xing {color: #1a7576} +// .social-icon-style-11 a.print{color: #222222} +// .social-icon-style-11 a.blogger {color: #ff8000} +// .social-icon-style-11 a.flipboard {color: #e12828} +// .social-icon-style-11 a.meneame {color: #ff6400} +// .social-icon-style-11 a.mailru {color: #168de2} +// .social-icon-style-11 a.delicious {color: #205cc0} +// .social-icon-style-11 a.livejournal {color: #00b0ea} +// .social-icon-style-11 a:hover {color: #fff;} + +// /* social icon style */ +// .social-icon-style-1 a.facebook,.social-icon-style-2 a.facebook,.social-icon-style-3 a.facebook,.social-icon-style-4 a.facebook span,.social-icon-style-10 a.facebook span {background-color: #3b5998} +// .social-icon-style-1 a.twitter,.social-icon-style-2 a.twitter,.social-icon-style-3 a.twitter,.social-icon-style-4 a.twitter span,.social-icon-style-10 a.twitter span {background-color: #00aced} +// .social-icon-style-1 a.google,.social-icon-style-2 a.google,.social-icon-style-3 a.google,.social-icon-style-4 a.google span,.social-icon-style-10 a.google span {background-color: #dc4a38} +// .social-icon-style-1 a.dribbble,.social-icon-style-2 a.dribbble,.social-icon-style-3 a.dribbble,.social-icon-style-4 a.dribbble span,.social-icon-style-10 a.dribbble span {background-color: #ea4c89} +// .social-icon-style-1 a.youtube,.social-icon-style-2 a.youtube,.social-icon-style-3 a.youtube,.social-icon-style-4 a.youtube span,.social-icon-style-10 a.youtube span {background-color: #bb0000} +// .social-icon-style-1 a.linkedin,.social-icon-style-2 a.linkedin,.social-icon-style-3 a.linkedin,.social-icon-style-4 a.linkedin span,.social-icon-style-10 a.linkedin span {background-color: #007bb6} +// .social-icon-style-1 a.instagram,.social-icon-style-2 a.instagram,.social-icon-style-3 a.instagram,.social-icon-style-4 a.instagram span,.social-icon-style-10 a.instagram span {background-color: #FE1F49} +// .social-icon-style-1 a.pinterest,.social-icon-style-2 a.pinterest,.social-icon-style-3 a.pinterest,.social-icon-style-4 a.pinterest span,.social-icon-style-10 a.pinterest span {background-color: #CB2027} +// .social-icon-style-1 a.flickr,.social-icon-style-2 a.flickr,.social-icon-style-3 a.flickr,.social-icon-style-4 a.flickr span,.social-icon-style-10 a.flickr span {background-color: #ff0084} +// .social-icon-style-1 a.rss,.social-icon-style-2 a.rss,.social-icon-style-3 a.rss,.social-icon-style-4 a.rss span,.social-icon-style-10 a.rss span {background-color: #f2890a} +// .social-icon-style-1 a.behance,.social-icon-style-2 a.behance,.social-icon-style-3 a.behance,.social-icon-style-4 a.behance span,.social-icon-style-10 a.behance span {background-color: #1769ff} +// .social-icon-style-1 a.vine,.social-icon-style-2 a.vine,.social-icon-style-3 a.vine,.social-icon-style-4 a.vine span,.social-icon-style-10 a.vine span {background-color: #00bf8f} +// .social-icon-style-1 a.email,.social-icon-style-2 a.email,.social-icon-style-3 a.email,.social-icon-style-4 a.email span,.social-icon-style-10 a.email span {background-color: #7d7d7d} +// .social-icon-style-1 a.sms,.social-icon-style-2 a.sms,.social-icon-style-3 a.sms,.social-icon-style-4 a.sms span,.social-icon-style-10 a.sms span {background-color: #ffbd00} +// .social-icon-style-1 a.sharethis,.social-icon-style-2 a.sharethis,.social-icon-style-3 a.sharethis,.social-icon-style-4 a.sharethis span,.social-icon-style-10 a.sharethis span {background-color: #95D03A} +// .social-icon-style-1 a.reddit,.social-icon-style-2 a.reddit,.social-icon-style-3 a.reddit,.social-icon-style-4 a.reddit span,.social-icon-style-10 a.reddit span {background-color: #ff4500} +// .social-icon-style-1 a.tumblr,.social-icon-style-2 a.tumblr,.social-icon-style-3 a.tumblr,.social-icon-style-4 a.tumblr span,.social-icon-style-10 a.tumblr span {background-color: #32506d} +// .social-icon-style-1 a.digg,.social-icon-style-2 a.digg,.social-icon-style-3 a.digg,.social-icon-style-4 a.digg span,.social-icon-style-10 a.digg span {background-color: #262626} +// .social-icon-style-1 a.stumbleupon,.social-icon-style-2 a.stumbleupon,.social-icon-style-3 a.stumbleupon,.social-icon-style-4 a.stumbleupon span,.social-icon-style-10 a.stumbleupon span {background-color: #eb4924} +// .social-icon-style-1 a.whatsapp,.social-icon-style-2 a.whatsapp,.social-icon-style-3 a.whatsapp,.social-icon-style-4 a.whatsapp span,.social-icon-style-10 a.whatsapp span {background-color: #25d366} +// .social-icon-style-1 a.vk,.social-icon-style-2 a.vk,.social-icon-style-3 a.vk,.social-icon-style-4 a.vk span,.social-icon-style-10 a.vk span {background-color: #4c6c91} +// .social-icon-style-1 a.weibo,.social-icon-style-2 a.weibo,.social-icon-style-3 a.weibo,.social-icon-style-4 a.weibo span,.social-icon-style-10 a.weibo span {background-color: #ff9933} +// .social-icon-style-1 a.odnoklassniki,.social-icon-style-2 a.odnoklassniki,.social-icon-style-3 a.odnoklassniki,.social-icon-style-4 a.odnoklassniki span,.social-icon-style-10 a.odnoklassniki span {background-color: #d7772d} +// .social-icon-style-1 a.xing,.social-icon-style-2 a.xing,.social-icon-style-3 a.xing,.social-icon-style-4 a.xing span,.social-icon-style-10 a.xing span {background-color: #1a7576} +// .social-icon-style-1 a.print,.social-icon-style-2 a.print,.social-icon-style-3 a.print,.social-icon-style-4 a.print span,.social-icon-style-10 a.print span {background-color: #222222} +// .social-icon-style-1 a.blogger,.social-icon-style-2 a.blogger,.social-icon-style-3 a.blogger,.social-icon-style-4 a.blogger span,.social-icon-style-10 a.blogger span {background-color: #ff8000} +// .social-icon-style-1 a.flipboard,.social-icon-style-2 a.flipboard,.social-icon-style-3 a.flipboard,.social-icon-style-4 a.flipboard span,.social-icon-style-10 a.flipboard span {background-color: #e12828} +// .social-icon-style-1 a.meneame,.social-icon-style-2 a.meneame,.social-icon-style-3 a.meneame,.social-icon-style-4 a.meneame span,.social-icon-style-10 a.meneame span {background-color: #ff6400} +// .social-icon-style-1 a.mailru,.social-icon-style-2 a.mailru,.social-icon-style-3 a.mailru,.social-icon-style-4 a.mailru span,.social-icon-style-10 a.mailru span {background-color: #168de2} +// .social-icon-style-1 a.delicious,.social-icon-style-2 a.delicious,.social-icon-style-3 a.delicious,.social-icon-style-4 a.delicious span,.social-icon-style-10 a.delicious span {background-color: #205cc0} +// .social-icon-style-1 a.livejournal,.social-icon-style-2 a.livejournal,.social-icon-style-3 a.livejournal,.social-icon-style-4 a.livejournal span,.social-icon-style-10 a.livejournal span {background-color: #00b0ea} + +// /* social icon style */ +// .social-icon-style-6 a.facebook:hover {border-color: #3b5998; color: #3b5998} +// .social-icon-style-6 a.twitter:hover {border-color: #00aced; color: #00aced} +// .social-icon-style-6 a.google:hover {border-color: #dc4a38; color: #dc4a38} +// .social-icon-style-6 a.dribbble:hover {border-color: #ea4c89; color: #ea4c89} +// .social-icon-style-6 a.youtube:hover {border-color: #bb0000; color: #bb0000} +// .social-icon-style-6 a.linkedin:hover {border-color: #0077b5; color: #0077b5} +// .social-icon-style-6 a.instagram:hover {border-color: #FE1F49; color: #FE1F49} +// .social-icon-style-6 a.pinterest:hover {border-color: #CB2027; color: #CB2027} +// .social-icon-style-6 a.flickr:hover {border-color: #ff0084; color: #ff0084} +// .social-icon-style-6 a.rss:hover {border-color: #f2890a; color: #f2890a} +// .social-icon-style-6 a.behance:hover {border-color: #1769ff; color: #1769ff} +// .social-icon-style-6 a.vine:hover {border-color: #00bf8f; color: #00bf8f} +// .social-icon-style-6 a.email:hover {border-color: #7d7d7d; color: #7d7d7d} +// .social-icon-style-6 a.sms:hover {border-color: #ffbd00; color: #ffbd00} +// .social-icon-style-6 a.sharethis:hover {border-color: #95D03A; color: #95D03A} +// .social-icon-style-6 a.reddit:hover {border-color: #ff4500; color: #ff4500} +// .social-icon-style-6 a.tumblr:hover {border-color: #32506d; color: #32506d} +// .social-icon-style-6 a.digg:hover {border-color: #262626; color: #262626} +// .social-icon-style-6 a.stumbleupon:hover {border-color: #eb4924; color: #eb4924} +// .social-icon-style-6 a.whatsapp:hover {border-color: #25d366; color: #25d366} +// .social-icon-style-6 a.vk:hover {border-color: #4c6c91; color: #4c6c91} +// .social-icon-style-6 a.weibo:hover {border-color: #ff9933; color: #ff9933} +// .social-icon-style-6 a.odnoklassniki:hover {border-color: #d7772d; color: #d7772d} +// .social-icon-style-6 a.xing:hover {border-color: #1a7576; color: #1a7576} +// .social-icon-style-6 a.print:hover{border-color: #222222; color: #222222} +// .social-icon-style-6 a.blogger:hover {border-color: #ff8000; color: #ff8000} +// .social-icon-style-6 a.flipboard:hover {border-color: #e12828; color: #e12828} +// .social-icon-style-6 a.meneame:hover {border-color: #ff6400; color: #ff6400} +// .social-icon-style-6 a.mailru:hover {border-color: #168de2; color: #168de2} +// .social-icon-style-6 a.delicious:hover {border-color: #205cc0; color: #205cc0} +// .social-icon-style-6 a.livejournal:hover {border-color: #00b0ea; color: #00b0ea} + +// /* social icon style */ +// .social-icon-style-7 a.facebook:hover {border-color: #3b5998; background-color: #3b5998} +// .social-icon-style-7 a.twitter:hover {border-color: #00aced; background-color: #00aced} +// .social-icon-style-7 a.google:hover {border-color: #dc4a38; background-color: #dc4a38} +// .social-icon-style-7 a.dribbble:hover {border-color: #ea4c89; background-color: #ea4c89} +// .social-icon-style-7 a.youtube:hover {border-color: #bb0000; background-color: #bb0000} +// .social-icon-style-7 a.linkedin:hover {border-color: #0077b5; background-color: #0077b5} +// .social-icon-style-7 a.instagram:hover {border-color: #FE1F49; background-color: #FE1F49} +// .social-icon-style-7 a.pinterest:hover {border-color: #CB2027; background-color: #CB2027} +// .social-icon-style-7 a.flickr:hover {border-color: #ff0084; background-color: #ff0084} +// .social-icon-style-7 a.rss:hover {border-color: #f2890a; background-color: #f2890a} +// .social-icon-style-7 a.behance:hover {border-color: #1769ff; background-color: #1769ff} +// .social-icon-style-7 a.vine:hover {border-color: #00bf8f; background-color: #00bf8f} +// .social-icon-style-7 a.email:hover {border-color: #7d7d7d; background-color: #7d7d7d} +// .social-icon-style-7 a.sms:hover {border-color: #ffbd00; background-color: #ffbd00} +// .social-icon-style-7 a.sharethis:hover {border-color: #95D03A; background-color: #95D03A} +// .social-icon-style-7 a.reddit:hover {border-color: #ff4500; background-color: #ff4500} +// .social-icon-style-7 a.tumblr:hover {border-color: #32506d; background-color: #32506d} +// .social-icon-style-7 a.digg:hover {border-color: #262626; background-color: #262626} +// .social-icon-style-7 a.stumbleupon:hover {border-color: #eb4924; background-color: #eb4924} +// .social-icon-style-7 a.whatsapp:hover {border-color: #25d366; background-color: #25d366} +// .social-icon-style-7 a.vk:hover {border-color: #4c6c91; background-color: #4c6c91} +// .social-icon-style-7 a.weibo:hover {border-color: #ff9933; background-color: #ff9933} +// .social-icon-style-7 a.odnoklassniki:hover {border-color: #d7772d; background-color: #d7772d} +// .social-icon-style-7 a.xing:hover {border-color: #1a7576; background-color: #1a7576} +// .social-icon-style-7 a.print:hover{border-color: #222222; background-color: #222222} +// .social-icon-style-7 a.blogger:hover {border-color: #ff8000; background-color: #ff8000} +// .social-icon-style-7 a.flipboard:hover {border-color: #e12828; background-color: #e12828} +// .social-icon-style-7 a.meneame:hover {border-color: #ff6400; background-color: #ff6400} +// .social-icon-style-7 a.mailru:hover {border-color: #168de2; background-color: #168de2} +// .social-icon-style-7 a.delicious:hover {border-color: #205cc0; background-color: #205cc0} +// .social-icon-style-7 a.livejournal:hover {border-color: #00b0ea; background-color: #00b0ea} diff --git a/dist/scss/_svg.scss b/dist/scss/_svg.scss new file mode 100644 index 00000000..65565621 --- /dev/null +++ b/dist/scss/_svg.scss @@ -0,0 +1,46 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Media | SVG +// ============================================================================ + +svg { + @include hyperlink_base; +} + +svg * { + @include hyperlink_base; + pointer-events: none; +} + + +.svg_container { + display: inline-block; + position: relative; + width: 100%; + padding-bottom: 100%; + vertical-align: top; + overflow: hidden; +} + +.svg_container svg { + display: inline-block; + position: relative; + width: 100%; + // position: absolute; + // top: 0; + // left: 0; +} diff --git a/dist/scss/index.scss b/dist/scss/index.scss index 75c1105a..3eb8ad1c 100644 --- a/dist/scss/index.scss +++ b/dist/scss/index.scss @@ -20,7 +20,7 @@ * * @description Icon Library * @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 +* @version v0.0.1 * @copyright 2020-2023 Scape Agency (https://www.scape.agency) * @website https://www.icon.gl/ * @repository https://github.com/scape-agency/icon.gl/ diff --git a/dist/sprite/css/sprite.css b/dist/sprite/css/sprite.css deleted file mode 100644 index 93a11c95..00000000 --- a/dist/sprite/css/sprite.css +++ /dev/null @@ -1,27 +0,0 @@ -.svg-icon-admin { - background: url("svg/sprite.css-48f5e25e.svg") 0 0 no-repeat; -} - -.svg-icon-admin-dims { - width: 16px; - height: 16px; -} - -.svg-icon-api { - background: url("svg/sprite.css-48f5e25e.svg") 100% 0 no-repeat; -} - -.svg-icon-api-dims { - width: 16px; - height: 16px; -} - -.svg-icon-home { - background: url("svg/sprite.css-48f5e25e.svg") 0 100% no-repeat; -} - -.svg-icon-home-dims { - width: 16px; - height: 16px; -} - diff --git a/dist/sprite/css/svg/sprite.css-48f5e25e.svg b/dist/sprite/css/svg/sprite.css-48f5e25e.svg deleted file mode 100644 index 482a6ab0..00000000 --- a/dist/sprite/css/svg/sprite.css-48f5e25e.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dist/sprite/css/svg/sprite.css-8eb16979.svg b/dist/sprite/css/svg/sprite.css-8eb16979.svg new file mode 100644 index 00000000..5f25ba6b --- /dev/null +++ b/dist/sprite/css/svg/sprite.css-8eb16979.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/sprite/defs/svg/sprite.defs.svg b/dist/sprite/defs/svg/sprite.defs.svg index 8e629662..a55a9595 100644 --- a/dist/sprite/defs/svg/sprite.defs.svg +++ b/dist/sprite/defs/svg/sprite.defs.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/sprite/stack/svg/sprite.stack.svg b/dist/sprite/stack/svg/sprite.stack.svg index c9d56e7b..3f1d8ac0 100644 --- a/dist/sprite/stack/svg/sprite.stack.svg +++ b/dist/sprite/stack/svg/sprite.stack.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/sprite/symbol/icon.gl.svg b/dist/sprite/symbol/icon.gl.svg index 1f7dedc1..c2f0bd64 100644 --- a/dist/sprite/symbol/icon.gl.svg +++ b/dist/sprite/symbol/icon.gl.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/sprite/view/svg/sprite.view-8eb16979.svg b/dist/sprite/view/svg/sprite.view-8eb16979.svg new file mode 100644 index 00000000..5f25ba6b --- /dev/null +++ b/dist/sprite/view/svg/sprite.view-8eb16979.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/sprite/view/svg/sprite.view-e6d8c712.svg b/dist/sprite/view/svg/sprite.view-e6d8c712.svg deleted file mode 100644 index 8184e672..00000000 --- a/dist/sprite/view/svg/sprite.view-e6d8c712.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dist/svg/admin.svg b/dist/svg/admin.svg deleted file mode 100644 index ca8ec27b..00000000 --- a/dist/svg/admin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/dist/svg/api.svg b/dist/svg/api.svg deleted file mode 100644 index 65aeca55..00000000 --- a/dist/svg/api.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/dist/svg/home.svg b/dist/svg/home.svg deleted file mode 100644 index 3aad86a2..00000000 --- a/dist/svg/home.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/package.json b/package.json index 27f7e92c..cef042a4 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,8 @@ ], "main": "src/scss/index.scss", "type": "module", - "module": "dist/js/unit.gl.js", - "style": "dist/css/unit.gl.css", + "module": "dist/js/icon.gl.js", + "style": "dist/css/icon.gl.css", "sass": "src/scss/index.scss", "scripts": { "format": "npx prettier --write .", diff --git a/script/js/class/StyleProcessor.js.map b/script/js/class/StyleProcessor.js.map index f65f4490..143413b3 100644 --- a/script/js/class/StyleProcessor.js.map +++ b/script/js/class/StyleProcessor.js.map @@ -1 +1 @@ -{"version":3,"file":"StyleProcessor.js","sourceRoot":"","sources":["../../ts/class/StyleProcessor.ts"],"names":[],"mappings":";AAqBA,OAAO,KAAK,IAAI,MAAM,MAAM,CAAA;AAC5B,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,qBAAqB,MAAM,sCAAsC,CAAC;AACzE,OAAO,uBAAuB,MAAM,wCAAwC,CAAC;AAW7E,MAAM,cAAc;IAQV,cAAc,CAChB,GAAW,EACX,WAAsC;;YAEtC,MAAM,MAAM,GAAG,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,CAAC;YAC5F,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC7F,CAAC;KAAA;IAQK,aAAa,CACf,SAAiB,EACjB,UAAmC,EACnC,WAAsC;;YAEtC,IAAI,CAAC;gBAED,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,YAAY,CAClC,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CACpC,CAAC;gBAEF,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,cAAc,CACvC,MAAM,CAAC,GAAG,EACV,WAAW,CACd,CAAC;gBAEF,EAAE,CAAC,aAAa,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;gBAE5C,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;oBAChB,EAAE,CAAC,aAAa,CAAC,GAAG,UAAU,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACpE,CAAC;YACL,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBAEX,OAAO,CAAC,KAAK,CAAC,gCAAgC,SAAS,GAAG,EAAE,GAAG,CAAC,CAAC;YACrE,CAAC;QACL,CAAC;KAAA;CACJ;AAOD,eAAe,cAAc,CAAC"} \ No newline at end of file +{"version":3,"file":"StyleProcessor.js","sourceRoot":"","sources":["../../ts/class/StyleProcessor.ts"],"names":[],"mappings":";AAqBA,OAAO,KAAK,IAAI,MAAM,MAAM,CAAA;AAC5B,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,qBAAqB,MAAM,sCAAsC,CAAC;AACzE,OAAO,uBAAuB,MAAM,wCAAwC,CAAC;AAW7E,MAAM,cAAc;IAQV,cAAc,CAChB,GAAW,EACX,WAAsC;;YAEtC,MAAM,MAAM,GAAG,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,CAAC;YAC5F,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC7F,CAAC;KAAA;IAQK,aAAa,CACf,SAAiB,EACjB,UAAmC,EACnC,WAAsC;;YAEtC,IAAI,CAAC;gBAGD,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,YAAY,CAClC,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CACpC,CAAC;gBAGF,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,cAAc,CACvC,MAAM,CAAC,GAAG,EACV,WAAW,CACd,CAAC;gBAGF,EAAE,CAAC,aAAa,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;gBAG5C,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;oBAChB,EAAE,CAAC,aAAa,CAAC,GAAG,UAAU,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACpE,CAAC;YACL,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBAEX,OAAO,CAAC,KAAK,CAAC,gCAAgC,SAAS,GAAG,EAAE,GAAG,CAAC,CAAC;YACrE,CAAC;QACL,CAAC;KAAA;CACJ;AAOD,eAAe,cAAc,CAAC"} \ No newline at end of file diff --git a/script/js/class/SvgPackager.js b/script/js/class/SvgPackager.js index 14f024ea..99c8c6ab 100644 --- a/script/js/class/SvgPackager.js +++ b/script/js/class/SvgPackager.js @@ -1,30 +1,29 @@ import { __awaiter } from "tslib"; -import * as fs_extra from 'fs-extra'; -import { promises as fs } from 'fs'; -import * as glob from 'glob'; +import * as fs from 'fs/promises'; import * as path from 'path'; -import { fileURLToPath } from "url"; +import * as glob from 'glob'; import SVGO from 'svgo'; import { loadConfig } from 'svgo'; -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); class SvgPackager { - processSvgFiles(directory, outputDirectory, ts_output_directory, json_output_directory) { + constructor(svgoConfigPath) { + this.svgoConfigPath = svgoConfigPath; + } + processSvgFiles(inputDirectory, outputDirectory, ts_output_directory, json_output_directory) { return __awaiter(this, void 0, void 0, function* () { const iconNames = []; try { - console.log(`Processing directory: ${directory}`); - const svgFiles = glob.sync(`${directory}/**/*.svg`); + console.log(`Processing directory: ${inputDirectory}`); + const svgFiles = glob.sync(`${inputDirectory}/**/*.svg`); for (const file of svgFiles) { console.log(`Processing file: ${file}`); const iconName = this.sanitizeFileName(path.basename(file, '.svg')); iconNames.push(iconName); console.log(`Processing icon: ${iconName}`); const svgContent = yield this.readSvgFile(file); - const optimizedSvg = yield this.optimizeSvg(file, svgContent); + const optimizedSvg = yield this.optimizeSvg(svgContent); const resultSvg = optimizedSvg.trim(); - yield this.writeSvgFile(file, iconName, resultSvg, outputDirectory); - yield this.writeTypeScriptFile(file, iconName, resultSvg, ts_output_directory); + yield this.writeSvgFile(iconName, resultSvg, outputDirectory); + yield this.writeTypeScriptFile(iconName, resultSvg, ts_output_directory); } yield this.writeIconsJson(iconNames, json_output_directory); console.log(`Successfully processed ${svgFiles.length} SVG files.`); @@ -37,57 +36,36 @@ class SvgPackager { } readSvgFile(filePath) { return __awaiter(this, void 0, void 0, function* () { - try { - const absolutePath = path.resolve(filePath); - const svgContent = yield fs.readFile(absolutePath, 'utf8'); - return svgContent; - } - catch (error) { - console.error('Error reading file:', filePath, error); - throw error; - } + return fs.readFile(filePath, 'utf8'); }); } sanitizeFileName(fileName) { return fileName.replace(/[^a-zA-Z0-9_]/g, '_'); } - optimizeSvg(filePath, svgContent) { + writeFiles(iconName, svgContent, outputDirectory) { return __awaiter(this, void 0, void 0, function* () { - try { - const config = yield loadConfig(path.join(__dirname, '../config/svgo.config.js')); - const result = yield SVGO.optimize(svgContent, Object.assign({ path: filePath }, config)); - return result.data; - } - catch (error) { - console.error('Error optimizing SVG:', error); - throw error; - } + yield this.writeSvgFile(iconName, svgContent, outputDirectory); + yield this.writeTypeScriptFile(iconName, svgContent, outputDirectory); }); } - writeTypeScriptFile(filePath, iconName, svgContent, outputDirectory) { + optimizeSvg(svgContent) { return __awaiter(this, void 0, void 0, function* () { - try { - const tsContent = `export const icon_${iconName} = \`${svgContent}\`;\n`; - const outputPath = path.join(outputDirectory, `${iconName}.ts`); - yield fs_extra.outputFile(outputPath, tsContent); - } - catch (error) { - console.error(`Error creating TypeScript file for ${filePath}:`, error); - throw error; - } + const config = yield loadConfig(this.svgoConfigPath); + const result = yield SVGO.optimize(svgContent, Object.assign({}, config)); + return result.data.trim(); }); } - writeSvgFile(filePath, iconName, svgContent, outputDirectory) { + writeTypeScriptFile(iconName, svgContent, outputDirectory) { return __awaiter(this, void 0, void 0, function* () { - try { - const outputPath = path.join(outputDirectory, `${iconName}.svg`); - yield fs_extra.outputFile(outputPath, svgContent); - console.log(`SVG file written successfully for ${iconName}`); - } - catch (error) { - console.error(`Error writing SVG file for ${iconName}:`, error); - throw error; - } + const tsContent = `export const icon_${iconName} = \`${svgContent}\`;\n`; + const outputPath = path.join(outputDirectory, `${iconName}.ts`); + yield fs.writeFile(outputPath, tsContent); + }); + } + writeSvgFile(iconName, svgContent, outputDirectory) { + return __awaiter(this, void 0, void 0, function* () { + const outputPath = path.join(outputDirectory, `${iconName}.svg`); + yield fs.writeFile(outputPath, svgContent); }); } writeIconsJson(iconNames, outputDirectory) { @@ -95,7 +73,7 @@ class SvgPackager { try { const jsonContent = JSON.stringify(iconNames, null, 2); const outputPath = path.join(outputDirectory, 'icons.json'); - yield fs_extra.outputFile(outputPath, jsonContent); + yield fs.writeFile(outputPath, jsonContent); console.log('Icons JSON file created successfully'); } catch (error) { diff --git a/script/js/class/SvgPackager.js.map b/script/js/class/SvgPackager.js.map index beb798a0..b67a2a71 100644 --- a/script/js/class/SvgPackager.js.map +++ b/script/js/class/SvgPackager.js.map @@ -1 +1 @@ -{"version":3,"file":"SvgPackager.js","sourceRoot":"","sources":["../../ts/class/SvgPackager.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"SvgPackager.js","sourceRoot":"","sources":["../../ts/class/SvgPackager.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/script/js/index.js b/script/js/index.js index 96b46bcb..d89f4dfa 100644 --- a/script/js/index.js +++ b/script/js/index.js @@ -23,7 +23,7 @@ const spriteGenerator = new SvgSpriteGenerator(svgspriteConfig); const tsCompiler = new TypeScriptCompiler(tsConfig); const jsMinifier = new JavaScriptMinifier(tensorConfig); const packageCreator = new PackageCreator(packageConfig); -const svgPackager = new SvgPackager(); +const svgPackager = new SvgPackager("./config/svgo.config.js"); const fontGenerator = new FontGenerator(); const styleProcessor = new StyleProcessor(); const versionWriter = new VersionWriter(); @@ -39,9 +39,16 @@ function main() { console.log(`Directory cleaned: ${CONFIG.path.dist}`); console.log('Starting Directory creation...'); yield directoryCreator.createDirectories('.', directories); - console.log('Starting SVG processing...'); - yield svgPackager.processSvgFiles(CONFIG.path.svg_input, CONFIG.path.svg_output, CONFIG.path.ts_output_icons, CONFIG.path.json_output); - console.log('SVG processing completed.'); + try { + const sourceDirectory = 'path/to/source/svg'; + const outputDirectory = 'path/to/output/svg'; + const tsOutputDirectory = 'path/to/output/ts'; + const jsonOutputDirectory = 'path/to/output/json'; + yield svgPackager.processSvgFiles(sourceDirectory, outputDirectory, tsOutputDirectory, jsonOutputDirectory); + } + catch (error) { + console.error('Failed to process SVG files:', error); + } console.log('Starting font generation...'); yield fontGenerator.generateFonts(CONFIG.path.font_input, CONFIG.path.font_output); console.log('Font generation completed.'); diff --git a/script/js/index.js.map b/script/js/index.js.map index 3acb03ce..bfac143b 100644 --- a/script/js/index.js.map +++ b/script/js/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/script/ts/class/SvgPackager.ts b/script/ts/class/SvgPackager.ts index 95e6e158..5b64daa5 100644 --- a/script/ts/class/SvgPackager.ts +++ b/script/ts/class/SvgPackager.ts @@ -19,20 +19,12 @@ // Import // ============================================================================ -// import * as fs from 'fs'; -import * as fs_extra from 'fs-extra'; -import { promises as fs } from 'fs'; // Using promisified fs -import * as glob from 'glob'; +import * as fs from 'fs/promises'; import * as path from 'path'; -import { fileURLToPath } from "url"; +import * as glob from 'glob'; import SVGO from 'svgo'; import { loadConfig } from 'svgo'; -// Convert the current file's URL to a file path -const __filename = fileURLToPath(import.meta.url); - -// Derive the directory name of the current module -const __dirname = path.dirname(__filename); // ============================================================================ // Classes @@ -45,13 +37,19 @@ const __dirname = path.dirname(__filename); */ class SvgPackager { + /** + * Constructor for SvgPackager class. + * Optionally accepts configurations or dependencies. + */ + constructor(private svgoConfigPath: string) {} + /** * Processes all SVG files in a given directory. - * @param directory The directory containing SVG files to process. + * @param inputDirectory The directory containing SVG files to process. * @param outputDirectory The directory where optimized SVGs will be output as TypeScript files. */ public async processSvgFiles( - directory: string, + inputDirectory: string, outputDirectory: string, ts_output_directory: string, json_output_directory: string, @@ -60,9 +58,9 @@ class SvgPackager { const iconNames: string[] = []; try { - console.log(`Processing directory: ${directory}`); + console.log(`Processing directory: ${inputDirectory}`); - const svgFiles = glob.sync(`${directory}/**/*.svg`); + const svgFiles = glob.sync(`${inputDirectory}/**/*.svg`); for (const file of svgFiles) { console.log(`Processing file: ${file}`); @@ -70,19 +68,20 @@ class SvgPackager { iconNames.push(iconName); console.log(`Processing icon: ${iconName}`); const svgContent = await this.readSvgFile(file); - const optimizedSvg = await this.optimizeSvg(file, svgContent); + const optimizedSvg = await this.optimizeSvg(svgContent); + // const optimizedSvg = await this.optimizeSvg(file, svgContent); // svgo will always add a final newline when in pretty mode const resultSvg = optimizedSvg.trim() // Write the optimized SVG file await this.writeSvgFile( - file, + // file, iconName, resultSvg, outputDirectory ); // Write the optimized TypeScript file await this.writeTypeScriptFile( - file, + // file, iconName, resultSvg, ts_output_directory @@ -95,31 +94,71 @@ class SvgPackager { throw error; } } + // public async processSvgFiles(directory: string, outputDirectory: string): Promise { + // try { + // console.log(`Processing directory: ${directory}`); + // const svgFiles = await this.findSvgFiles(directory); + + // for (const file of svgFiles) { + // const iconName = this.sanitizeFileName(path.basename(file, '.svg')); + // console.log(`Processing file: ${file}`); + + // const svgContent = await this.readSvgFile(file); + // const optimizedSvg = await this.optimizeSvg(svgContent); + // await this.writeFiles(iconName, optimizedSvg, outputDirectory); + // } + + // console.log(`Successfully processed ${svgFiles.length} SVG files.`); + // } catch (error) { + // console.error('Error processing SVG files:', error); + // throw error; + // } + // } + + + // private async findSvgFiles(directory: string): Promise { + // return new Promise((resolve, reject) => { + // glob(`${directory}/**/*.svg`, (err, files) => { + // if (err) reject(err); + // else resolve(files); + // }); + // }); + // } /** * Reads the content of an SVG file. * @param filePath The path to the SVG file. * @returns The content of the SVG file. */ + // private async readSvgFile(filePath: string): Promise { + // try { + // const absolutePath = path.resolve(filePath); + // const svgContent = await fs.readFile(absolutePath, 'utf8'); + // return svgContent; + // } catch (error) { + // console.error('Error reading file:', filePath, error); + // throw error; + // } + // } private async readSvgFile(filePath: string): Promise { - try { - const absolutePath = path.resolve(filePath); - const svgContent = await fs.readFile(absolutePath, 'utf8'); - return svgContent; - } catch (error) { - console.error('Error reading file:', filePath, error); - throw error; - } + return fs.readFile(filePath, 'utf8'); } - /** * Sanitizes a file name to be a valid TypeScript identifier. * @param fileName The original file name. * @returns A sanitized version of the file name. */ + // private sanitizeFileName(fileName: string): string { + // // Implement more robust sanitization logic if necessary + // return fileName.replace(/[^a-zA-Z0-9_]/g, '_'); + // } private sanitizeFileName(fileName: string): string { - // Implement more robust sanitization logic if necessary - return fileName.replace(/[^a-zA-Z0-9_]/g, '_'); + return fileName.replace(/[^a-zA-Z0-9_]/g, '_'); + } + + private async writeFiles(iconName: string, svgContent: string, outputDirectory: string): Promise { + await this.writeSvgFile(iconName, svgContent, outputDirectory); + await this.writeTypeScriptFile(iconName, svgContent, outputDirectory); } /** @@ -127,49 +166,59 @@ class SvgPackager { * @param svgContent The raw SVG content. * @returns The optimized SVG content. */ - private async optimizeSvg( - filePath: string, - svgContent: string - ): Promise { + // private async optimizeSvg( + // filePath: string, + // svgContent: string + // ): Promise { - try { + // try { - const config = await loadConfig( - path.join(__dirname, '../config/svgo.config.js') - ) + // const config = await loadConfig( + // path.join(__dirname, '../config/svgo.config.js') + // ) - const result = await SVGO.optimize( - svgContent, - { path: filePath, ...config } // Add SVGO options if needed - ); + // const result = await SVGO.optimize( + // svgContent, + // { path: filePath, ...config } // Add SVGO options if needed + // ); - return result.data; - } catch (error) { - console.error('Error optimizing SVG:', error); - throw error; - } + // return result.data; + // } catch (error) { + // console.error('Error optimizing SVG:', error); + // throw error; + // } + // } + private async optimizeSvg(svgContent: string): Promise { + const config = await loadConfig(this.svgoConfigPath); + const result = await SVGO.optimize(svgContent, { ...config }); + return result.data.trim(); } - /** * Creates a TypeScript file from SVG content. * @param filePath The path of the SVG file. * @param svgContent The optimized SVG content. * @param outputDirectory The directory to output the TypeScript file. */ - private async writeTypeScriptFile( - filePath: string, - iconName: string, - svgContent: string, - outputDirectory: string - ): Promise { - try { - const tsContent = `export const icon_${iconName} = \`${svgContent}\`;\n`; - const outputPath = path.join(outputDirectory, `${iconName}.ts`); - await fs_extra.outputFile(outputPath, tsContent); - } catch (error) { - console.error(`Error creating TypeScript file for ${filePath}:`, error); - throw error; - } + // private async writeTypeScriptFile( + // filePath: string, + // iconName: string, + // svgContent: string, + // outputDirectory: string + // ): Promise { + // try { + // const tsContent = `export const icon_${iconName} = \`${svgContent}\`;\n`; + // const outputPath = path.join(outputDirectory, `${iconName}.ts`); + // await fs.writeFile(outputPath, tsContent); + // } catch (error) { + // console.error(`Error creating TypeScript file for ${filePath}:`, error); + // throw error; + // } + // } + + private async writeTypeScriptFile(iconName: string, svgContent: string, outputDirectory: string): Promise { + const tsContent = `export const icon_${iconName} = \`${svgContent}\`;\n`; + const outputPath = path.join(outputDirectory, `${iconName}.ts`); + await fs.writeFile(outputPath, tsContent); } /** @@ -178,20 +227,24 @@ class SvgPackager { * @param svgContent The SVG content to be written. * @param outputDirectory The directory to output the SVG file. */ - private async writeSvgFile( - filePath: string, - iconName: string, - svgContent: string, - outputDirectory: string - ): Promise { - try { - const outputPath = path.join(outputDirectory, `${iconName}.svg`); - await fs_extra.outputFile(outputPath, svgContent); - console.log(`SVG file written successfully for ${iconName}`); - } catch (error) { - console.error(`Error writing SVG file for ${iconName}:`, error); - throw error; - } + // private async writeSvgFile( + // filePath: string, + // iconName: string, + // svgContent: string, + // outputDirectory: string + // ): Promise { + // try { + // const outputPath = path.join(outputDirectory, `${iconName}.svg`); + // await fs_extra.outputFile(outputPath, svgContent); + // console.log(`SVG file written successfully for ${iconName}`); + // } catch (error) { + // console.error(`Error writing SVG file for ${iconName}:`, error); + // throw error; + // } + // } + private async writeSvgFile(iconName: string, svgContent: string, outputDirectory: string): Promise { + const outputPath = path.join(outputDirectory, `${iconName}.svg`); + await fs.writeFile(outputPath, svgContent); } /** @@ -211,7 +264,8 @@ class SvgPackager { try { const jsonContent = JSON.stringify(iconNames, null, 2); const outputPath = path.join(outputDirectory, 'icons.json'); - await fs_extra.outputFile(outputPath, jsonContent); + // await fs_extra.outputFile(outputPath, jsonContent); + await fs.writeFile(outputPath, jsonContent); console.log('Icons JSON file created successfully'); } catch (error) { console.error('Error writing icons JSON file:', error); @@ -219,6 +273,8 @@ class SvgPackager { } } + + } diff --git a/script/ts/index.ts b/script/ts/index.ts index 87e46f47..accd1d84 100644 --- a/script/ts/index.ts +++ b/script/ts/index.ts @@ -53,7 +53,7 @@ const spriteGenerator = new SvgSpriteGenerator(svgspriteConfig); const tsCompiler = new TypeScriptCompiler(tsConfig); const jsMinifier = new JavaScriptMinifier(tensorConfig); const packageCreator = new PackageCreator(packageConfig); -const svgPackager = new SvgPackager(); +const svgPackager = new SvgPackager("./config/svgo.config.js"); const fontGenerator = new FontGenerator(); const styleProcessor = new StyleProcessor(); const versionWriter = new VersionWriter(); @@ -92,14 +92,44 @@ async function main() { // SVG // -------------------------------------------------------------------- - console.log('Starting SVG processing...'); - await svgPackager.processSvgFiles( - CONFIG.path.svg_input, - CONFIG.path.svg_output, - CONFIG.path.ts_output_icons, - CONFIG.path.json_output, - ); - console.log('SVG processing completed.'); + + + + + + + // async function processSvgs() { + try { + const sourceDirectory = 'path/to/source/svg'; + const outputDirectory = 'path/to/output/svg'; + const tsOutputDirectory = 'path/to/output/ts'; + const jsonOutputDirectory = 'path/to/output/json'; + + await svgPackager.processSvgFiles( + sourceDirectory, + outputDirectory, + tsOutputDirectory, + jsonOutputDirectory + ); + } catch (error) { + console.error('Failed to process SVG files:', error); + } + // } + + // processSvgs(); + + + + + + // console.log('Starting SVG processing...'); + // await svgPackager.processSvgFiles( + // CONFIG.path.svg_input, + // CONFIG.path.svg_output, + // CONFIG.path.ts_output_icons, + // CONFIG.path.json_output, + // ); + // console.log('SVG processing completed.'); // Font