@epiled/icon-font-builder 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,22 +1,303 @@
1
- # icon-font-builder
1
+ # Icon Font Builder
2
2
 
3
- Generate icon fonts from SVG files.
3
+ Generate icon fonts from SVG files and automatically create CSS classes for them.
4
+
5
+ <div style="display: inline-flex; gap: 2px">
6
+
7
+ ![npm](https://img.shields.io/npm/v/@epiled/icon-font-builder)
8
+
9
+ ![downloads](https://img.shields.io/npm/dw/@epiled/icon-font-builder)
10
+
11
+ ![license](https://img.shields.io/npm/l/@epiled/icon-font-builder)
12
+
13
+ </div>
14
+
15
+ ## Features
16
+
17
+ - Generate icon fonts from SVG files
18
+ - Automatic CSS class generation
19
+ - CLI and Node API support
20
+ - Customizable output structure
21
+ - Automatic icons preview page
4
22
 
5
23
  ## Install
6
24
 
25
+ ```bash
7
26
  npm install @epiled/icon-font-builder
27
+ ```
8
28
 
9
29
  ## CLI
10
30
 
31
+ ```bash
11
32
  npx @epiled/icon-font-builder
33
+ ```
12
34
 
13
35
  ## Node API
14
36
 
15
- import { buildIcons } from "icon-font-builder";
37
+ ```js
38
+ import { buildIcons } from "@epiled/icon-font-builder";
39
+
40
+ await buildIcons();
41
+ ```
42
+
43
+ ## Usage
44
+
45
+ After building the icons, include the generated CSS in your project:
46
+
47
+ ```html
48
+ <link rel="stylesheet" href="css/icons.css" />
49
+ ```
50
+
51
+ Then use the icons with CSS classes:
52
+
53
+ ```html
54
+ <i class="icon-add-user"></i>
55
+ <i class="icon-arrow"></i>
56
+ ```
57
+
58
+ ## Examples
59
+
60
+ ### Gulp
16
61
 
17
- await buildIcons({
18
- inputDir: "src/icons",
19
- outputDir: "dist/fonts",
20
- cssClass: "icon",
21
- fontName: "icons"
62
+ Example using Gulp task runner.
63
+
64
+ #### Minimal configuration
65
+
66
+ ```js
67
+ import gulp from "gulp";
68
+ import { buildIcons } from "@epiled/icon-font-builder";
69
+
70
+ gulp.task("buildIcons", async function () {
71
+ await buildIcons();
22
72
  });
73
+ ```
74
+
75
+ ##### Example Project Structure:
76
+
77
+ ```text
78
+ src/
79
+ ├── icons/
80
+ | ├── icon-add-user.svg
81
+ | └── icon-arrow.svg
82
+ ```
83
+
84
+ ##### Output Tree:
85
+
86
+ ```text
87
+ dist/
88
+ ├── css/
89
+ | └── icons.css
90
+ ├── fonts/
91
+ | └── Icons/
92
+ | ├── Icons.svg
93
+ | ├── Icons.ttf
94
+ | ├── Icons.woff
95
+ | └── Icons.woff2
96
+ └── icons-preview.html
97
+ ```
98
+
99
+ ##### Output CSS:
100
+
101
+ ```css
102
+ @font-face {
103
+ font-family: "Icons";
104
+ src:
105
+ url("../fonts/Icons/Icons.woff2") format("woff2"),
106
+ url("../fonts/Icons/Icons.woff") format("woff"),
107
+ url("../fonts/Icons/Icons.ttf") format("truetype");
108
+ font-weight: normal;
109
+ font-style: normal;
110
+ font-display: swap;
111
+ }
112
+
113
+ [class^="icon-"],
114
+ [class*=" icon-"] {
115
+ font-family: "Icons" !important;
116
+ speak: none;
117
+ font-style: normal;
118
+ font-weight: normal;
119
+ font-variant: normal;
120
+ text-transform: none;
121
+ line-height: 1;
122
+ -webkit-font-smoothing: antialiased;
123
+ -moz-osx-font-smoothing: grayscale;
124
+ }
125
+
126
+ .icon-add-user::before {
127
+ content: "\e001";
128
+ }
129
+
130
+ .icon-arrow::before {
131
+ content: "\e002";
132
+ }
133
+ ```
134
+
135
+ #### Recommended configuration
136
+
137
+ ```js
138
+ import gulp from "gulp";
139
+ import { buildIcons } from "@epiled/icon-font-builder";
140
+
141
+ gulp.task("buildIcons", async function () {
142
+ await buildIcons({iconsName: "Epl-Icons"});
143
+ });
144
+ ```
145
+
146
+ ##### Output Tree:
147
+
148
+ ```text
149
+ dist/
150
+ ├── Epl-Icons/
151
+ │ └── Epl-Icons/
152
+ │ ├── Epl-Icons.svg
153
+ │ ├── Epl-Icons.ttf
154
+ │ ├── Epl-Icons.woff
155
+ │ └── Epl-Icons.woff2
156
+ ├── css/
157
+ │ └── epl-icons.css
158
+ └── icons-preview.html
159
+ ```
160
+
161
+ ##### Output CSS:
162
+
163
+ ```css
164
+ @font-face {
165
+ font-family: "Epl-Icons";
166
+ src:
167
+ url("../Epl-Icons/Epl-Icons/Epl-Icons.woff2")
168
+ format("woff2"),
169
+ url("../Epl-Icons/Epl-Icons/Epl-Icons.woff")
170
+ format("woff"),
171
+ url("../Epl-Icons/Epl-Icons/Epl-Icons.ttf")
172
+ format("truetype");
173
+ font-weight: normal;
174
+ font-style: normal;
175
+ font-display: swap;
176
+ }
177
+
178
+ [class^="icon-"],
179
+ [class*=" icon-"] {
180
+ font-family: "Epl-Icons" !important;
181
+ speak: none;
182
+ font-style: normal;
183
+ font-weight: normal;
184
+ font-variant: normal;
185
+ text-transform: none;
186
+ line-height: 1;
187
+ -webkit-font-smoothing: antialiased;
188
+ -moz-osx-font-smoothing: grayscale;
189
+ }
190
+
191
+ .icon-add-user::before {
192
+ content: "\e001";
193
+ }
194
+
195
+ .icon-arrow::before {
196
+ content: "\e002";
197
+ }
198
+ ```
199
+
200
+ #### Full configuration:
201
+
202
+ ```js
203
+ import gulp from "gulp";
204
+ import { buildIcons } from "@epiled/icon-font-builder";
205
+
206
+ gulp.task("buildIcons", async function () {
207
+ await buildIcons({
208
+ iconsName: "Icons-All", // required
209
+ inputDir: "src/icons",
210
+ outputDir: `dist/Icons-Output`,
211
+ font: {
212
+ fontName: "Icons-Font-Name",
213
+ folderName: "Icons-Folder-Name",
214
+ fontFileName: "Icons-Font-File-Name",
215
+ fontPath: "../Icons-Font-Path",
216
+ },
217
+ css: {
218
+ cssClass: "icon-all",
219
+ cssFileName: "icons-css-file-name",
220
+ },
221
+ });
222
+ });
223
+ ```
224
+
225
+ ##### Output Tree:
226
+
227
+ ```text
228
+ dist/
229
+ ├── Icons-Output/
230
+ │ └── Icons-Folder-Name/
231
+ │ ├── Icons-Font-File-Name.svg
232
+ │ ├── Icons-Font-File-Name.ttf
233
+ │ ├── Icons-Font-File-Name.woff
234
+ │ └── Icons-Font-File-Name.woff2
235
+ ├── css/
236
+ │ └── icons-css-file-name.css
237
+ └── icons-preview.html
238
+ ```
239
+
240
+ ##### Output CSS:
241
+
242
+ ```css
243
+ @font-face {
244
+ font-family: "Icons-All";
245
+ src:
246
+ url("../Icons-Font-Path/Icons-Folder-Name/Icons-Font-File-Name.woff2")
247
+ format("woff2"),
248
+ url("../Icons-Font-Path/Icons-Folder-Name/Icons-Font-File-Name.woff")
249
+ format("woff"),
250
+ url("../Icons-Font-Path/Icons-Folder-Name/Icons-Font-File-Name.ttf")
251
+ format("truetype");
252
+ font-weight: normal;
253
+ font-style: normal;
254
+ font-display: swap;
255
+ }
256
+
257
+ [class^="icon-all-"],
258
+ [class*=" icon-all-"] {
259
+ font-family: "Icons-All" !important;
260
+ speak: none;
261
+ font-style: normal;
262
+ font-weight: normal;
263
+ font-variant: normal;
264
+ text-transform: none;
265
+ line-height: 1;
266
+ -webkit-font-smoothing: antialiased;
267
+ -moz-osx-font-smoothing: grayscale;
268
+ }
269
+
270
+ .icon-all-add-user::before {
271
+ content: "\e001";
272
+ }
273
+
274
+ .icon-all-arrow::before {
275
+ content: "\e002";
276
+ }
277
+ ```
278
+
279
+ ## Options
280
+
281
+ | Option | Type | Default | Description |
282
+ | ----------------- | ------ | ---------- | --------------------------- |
283
+ | iconsName | string | Icons | Name of the icon set |
284
+ | inputDir | string | src/icons | Source folder for SVG icons |
285
+ | outputDir | string | dist/fonts | Output directory |
286
+ | font.fontName | string | Icons | Font name |
287
+ | font.folderName | string | Icons | Folder name for font files |
288
+ | font.fontFileName | string | Icons | Font file base name |
289
+ | font.fontPath | string | ../fonts | Path to font in CSS |
290
+ | css.cssClass | string | icon | CSS class prefix |
291
+ | css.cssFileName | string | icons | Name of generated CSS file |
292
+
293
+ ## Requirements
294
+
295
+ - Node.js 24.14.0+
296
+
297
+ ## Author
298
+
299
+ - [Felipe de Andrade](https://github.com/Epiled)
300
+
301
+ ## License
302
+
303
+ [MIT](https://github.com/Epiled/icon-font-builder/blob/main/LICENSE)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epiled/icon-font-builder",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Generate icon fonts from SVG files",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -25,8 +25,13 @@
25
25
  "url": "https://github.com/epiled/icon-font-builder/issues"
26
26
  },
27
27
  "engines": {
28
- "node": ">=20.12.2"
28
+ "node": ">=24.14.0"
29
29
  },
30
+ "files": [
31
+ "bin",
32
+ "src",
33
+ "index.js"
34
+ ],
30
35
  "dependencies": {
31
36
  "handlebars": "^4.7.8",
32
37
  "svg2ttf": "^6.0.3",
@@ -34,8 +39,16 @@
34
39
  "ttf2woff": "^3.0.0",
35
40
  "ttf2woff2": "^8.0.1"
36
41
  },
37
- "devDependencies": {},
42
+ "devDependencies": {
43
+ "tree-cli": "^0.6.7",
44
+ "vitest": "^4.1.0"
45
+ },
38
46
  "scripts": {
39
- "test": "echo \"Error: no test specified\" && exit 1"
47
+ "test": "vitest",
48
+ "prepublishOnly": "npm test",
49
+ "build:icons": "node scripts/build-default.js",
50
+ "build:icons:dev": "node scripts/build-dev.js",
51
+ "build:icons:dev:log": "node scripts/build-dev-glyphs.js",
52
+ "tree-cli": "npx tree-cli -l 5 -a --markdown --ignore node_modules/,build/,.git/,.next/,coverage/,out/,tmp/,temp/ ./ -o structure.md"
40
53
  }
41
- }
54
+ }
@@ -1,26 +1,49 @@
1
- // Function to create custom configuration
1
+ /**
2
+ * Creates a custom configuration for the icon builder.
3
+ *
4
+ * @warning
5
+ * ⚠️ The iconsName must be unique to avoid CSS conflicts.
6
+ *
7
+ * @example
8
+ * import { createConfig } from "@epiled/icon-font-builder"
9
+ *
10
+ * const config = createConfig({
11
+ * iconsName: "MyIcons"
12
+ * })
13
+ */
2
14
 
3
15
  export function createConfig(userConfig = {}) {
4
- const iconsName = userConfig.iconsName || "Epiled";
16
+ const iconsName = userConfig.iconsName || "Icons";
5
17
 
6
- const fontName = userConfig.font?.fontName || iconsName;
18
+ const defaultFont = {
19
+ fontName: iconsName,
20
+ folderName: iconsName,
21
+ fontFileName: iconsName,
22
+ fontPath: "../fonts",
23
+ };
24
+
25
+ const defaultCss = {
26
+ cssClass: "icon",
27
+ cssFileName: iconsName.toLowerCase(),
28
+ };
7
29
 
8
30
  const config = {
9
- inputDir: userConfig.inputDir || "src/assets/svg/icons-ui",
10
- outputDir: userConfig.outputDir || `dist/assets/fonts/${fontName}`,
11
31
  iconsName,
32
+ inputDir: userConfig.inputDir || "src/icons",
33
+ outputDir:
34
+ userConfig.outputDir ||
35
+ `dist/fonts/${userConfig.font?.fontName || iconsName}`,
12
36
 
13
37
  font: {
14
- fontName: userConfig.font?.folderName || fontName,
15
- folderName: userConfig.font?.folderName || fontName,
16
- fontFileName: userConfig.font?.fontFileName || fontName,
17
- fontPath: userConfig.font?.fontPath || "../assets/fonts",
38
+ ...defaultFont,
39
+ ...(userConfig.font || {}),
18
40
  },
19
-
20
41
  css: {
21
- cssClass: userConfig.css?.cssClass || "icon-",
22
- cssFileName: userConfig.css?.cssFileName || fontName.toLowerCase(),
42
+ ...defaultCss,
43
+ ...(userConfig.css || {}),
23
44
  },
45
+
46
+ ...userConfig.extra,
24
47
  };
25
48
 
26
49
  return config;
@@ -1,4 +1,4 @@
1
- // Step: 5
1
+ // Step: 5 - CSS
2
2
 
3
3
  import fs from "fs";
4
4
  import path from "path";
@@ -18,19 +18,22 @@ const baseIconTemplatePath = path.resolve(
18
18
  if (!fs.existsSync(baseIconTemplatePath))
19
19
  throw new Error(`Base icons template not found: ${baseIconTemplatePath}`);
20
20
 
21
+ if (!fs.existsSync(iconsTemplatePath)) {
22
+ throw new Error(`Template CSS not found: ${iconsTemplatePath}`);
23
+ }
24
+
21
25
  handlebars.registerPartial(
22
26
  "base-icons",
23
27
  fs.readFileSync(baseIconTemplatePath, "utf8"),
24
28
  );
25
29
 
30
+ const cssRaw = fs.readFileSync(iconsTemplatePath, "utf8");
31
+ const cssTemplate = handlebars.compile(cssRaw);
32
+
26
33
  function generateCss(glyphs = [], config) {
27
34
  const { font, css } = config;
28
35
  const { fontName, folderName, fontFileName, fontPath } = font;
29
- const { cssClass } = css;
30
-
31
- if (!fs.existsSync(iconsTemplatePath)) {
32
- throw new Error(`Template CSS not found: ${iconsTemplatePath}`);
33
- }
36
+ const { cssClass, cssFileName } = css;
34
37
 
35
38
  if (!Array.isArray(glyphs)) {
36
39
  throw new Error(
@@ -38,14 +41,11 @@ function generateCss(glyphs = [], config) {
38
41
  );
39
42
  }
40
43
 
41
- const outputPath = path.join("dist/css", `${fontFileName}.css`);
44
+ const outputPath = path.join("dist/css", `${cssFileName}.css`);
42
45
 
43
46
  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
44
47
 
45
- const cssRaw = fs.readFileSync(iconsTemplatePath, "utf8");
46
- const cssCompiled = handlebars.compile(cssRaw);
47
-
48
- const cssParse = cssCompiled({
48
+ const cssOutput = cssTemplate({
49
49
  fontName,
50
50
  folderName,
51
51
  fontFileName,
@@ -54,7 +54,9 @@ function generateCss(glyphs = [], config) {
54
54
  glyphs,
55
55
  });
56
56
 
57
- fs.writeFileSync(outputPath, cssParse);
57
+ fs.writeFileSync(outputPath, cssOutput);
58
+
59
+ return { outputPath, cssOutput };
58
60
  }
59
61
 
60
62
  export { generateCss };
@@ -1,4 +1,4 @@
1
- // Step: 5
1
+ // Step: 5 - SASS
2
2
 
3
3
  import fs from "fs";
4
4
  import path from "path";
@@ -21,19 +21,22 @@ const baseIconTemplatePath = path.resolve(
21
21
  if (!fs.existsSync(baseIconTemplatePath))
22
22
  throw new Error(`Base icons template not found: ${baseIconTemplatePath}`);
23
23
 
24
+ if (!fs.existsSync(iconsTemplatePath)) {
25
+ throw new Error(`Template SASS not found: ${iconsTemplatePath}`);
26
+ }
27
+
24
28
  handlebars.registerPartial(
25
29
  "base-icons",
26
30
  fs.readFileSync(baseIconTemplatePath, "utf8"),
27
31
  );
28
32
 
33
+ const sassRaw = fs.readFileSync(iconsTemplatePath, "utf8");
34
+ const sassTemplate = handlebars.compile(sassRaw);
35
+
29
36
  function generateSass(glyphs = [], config) {
30
37
  const { font, css } = config;
31
38
  const { fontName, folderName, fontFileName, fontPath } = font;
32
- const { cssClass } = css;
33
-
34
- if (!fs.existsSync(iconsTemplatePath)) {
35
- throw new Error(`Template SASS not found: ${iconsTemplatePath}`);
36
- }
39
+ const { cssClass, cssFileName } = css;
37
40
 
38
41
  if (!Array.isArray(glyphs)) {
39
42
  throw new Error(
@@ -41,14 +44,11 @@ function generateSass(glyphs = [], config) {
41
44
  );
42
45
  }
43
46
 
44
- const outputPath = path.join("dist/sass", `_${fontFileName}.scss`);
47
+ const outputPath = path.join("dist/sass", `_${cssFileName}.scss`);
45
48
 
46
49
  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
47
50
 
48
- const sassRaw = fs.readFileSync(iconsTemplatePath, "utf8");
49
- const sassCompiled = handlebars.compile(sassRaw);
50
-
51
- const sassParse = sassCompiled({
51
+ const sassOutput = sassTemplate({
52
52
  fontName,
53
53
  folderName,
54
54
  fontFileName,
@@ -57,7 +57,9 @@ function generateSass(glyphs = [], config) {
57
57
  glyphs,
58
58
  });
59
59
 
60
- fs.writeFileSync(outputPath, sassParse);
60
+ fs.writeFileSync(outputPath, sassOutput);
61
+
62
+ return { outputPath, sassOutput };
61
63
  }
62
64
 
63
65
  export { generateSass };
@@ -11,7 +11,7 @@
11
11
 
12
12
  {{> base-icons}}
13
13
 
14
- [class^="{{cssClass}}"], [class*=" {{cssClass}}"] {
14
+ [class^="{{cssClass}}-"], [class*=" {{cssClass}}-"] {
15
15
  font-family: '{{fontName}}' !important;
16
16
  speak: none;
17
17
  font-style: normal;
@@ -11,7 +11,7 @@
11
11
 
12
12
  {{> base-icons}}
13
13
 
14
- %{{cssClass}} {
14
+ %{{cssClass}}- {
15
15
  font-family: '{{fontName}}' !important;
16
16
  speak: none;
17
17
  font-style: normal;
@@ -1,18 +0,0 @@
1
- <?xml version="1.0" standalone="no"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
- <svg xmlns="http://www.w3.org/2000/svg">
4
- <defs>
5
- <font id="Epiled" horiz-adv-x="1000">
6
- <font-face font-family="Epiled"
7
- units-per-em="1000" ascent="1000"
8
- descent="0" />
9
- <missing-glyph horiz-adv-x="0" />
10
- <glyph glyph-name="add-user"
11
- unicode="&#xE001;"
12
- horiz-adv-x="1000" d="M18.01171875 145.3720703125C18.01171875 230.4296875 52.6298828125 291.6953125 130.431640625 324.529296875C168.6845703125 340.4853515624999 207.8525390625 354.150390625 247.728515625 365.4521484375C312.919921875 384.2480468749999 356.3408203125 416.1298828125 332.0732421875 501.544921875C296.384765625 526.05078125 269.0234375 576.2529296875 255.4609375 619.3173828125C227.7421875 708.1826171875 212.515625 805.375 255.4609375 896.73828125C291.982421875 974.18359375 361.337890625 1000.236328125 441.5185546875 999.998046875C588.5556640625 999.998046875 675.3984375 882.1064453125 654.69921875 736.97265625C646.2529296875 677.4912109375 648.2753906250001 620.626953125 609.017578125 571.7333984375C600.771484375 558.421875 591.2919921875001 545.9150390625 580.7041015625 534.37890625C415.583984375 396.0263671875 395.00390625 346.775390625 422.6025390625 145.3720703125L18.01171875 145.3720703125zM954.484375 362.1220703125C941.7001953125 387.767578125 924.5517578125002 410.9951171875 903.806640625 430.763671875C902.2597656250002 432.4296875 900.5947265625001 433.9755859375 899.0478515625 435.4033203125C868.904296875 462.7607421875 832.572265625 482.3964843749999 793.1708984375 492.6240234375C790.5537109375 493.2187500000001 787.8173828125 493.9326171875001 785.0810546875 494.408203125C767.2080078125 498.4873046875 748.9287109375 500.5224609375 730.595703125 500.4755859375C707.5869140625 500.5234375 684.6845703125 497.3603515625 662.5498046875 491.0771484375001L656.1259765625 489.1738281250001C615.2773437500001 476.3525390625001 578.41015625 453.2490234375001 549.0595703125001 422.0791015625001L549.0595703125001 422.0791015625001C507.7802734375001 378.4111328125 483.6953125000001 321.2822265625 481.2509765625001 261.2421875C481.2509765625001 257.6738281250001 481.2509765625001 254.1044921875001 481.2509765625001 250.4169921875V248.39453125C481.2509765625001 240.423828125 481.2509765625001 232.572265625 482.5595703125 224.6015625C482.5595703125 221.8652343749999 482.5595703125 219.1289062499999 483.5117187500001 216.51171875C495.9794921875001 123.6474609375 559.3623046875 45.5673828125 647.6796875 14.2753906249999C671.9248046875 5.6201171874999 697.3720703125 0.8037109375 723.1025390625001 0C725.9570312500001 0 728.8125000000001 0 731.6679687500001 0C734.5224609375001 0 737.3779296875 0 740.232421875 0C773.4423828125 0.9912109375 806.1044921875 8.7216796875 836.2353515625001 22.7216796875C961.6513671875 80.2304687500001 1016.7011718750002 228.51953125 959.1923828125002 353.9355468750001C957.912109375 356.7285156250001 956.5800781250002 359.4970703125001 955.1972656250002 362.2402343750001L954.484375 362.1220703125zM772.4716796875 210.8017578125C748.6787109374999 181.4179687499999 796.263671875 107.8994140625 727.0283203125 111.23046875C671.2353515625 113.966796875 707.3994140625 177.373046875 692.0537109375 209.13671875C659.3388671875 229.1220703125 591.5302734375 187.0097656249999 592.36328125 251.25C593.0771484375 310.7314453125 656.484375 272.7822265625 691.578125 291.578125C707.6376953125001 324.5302734375001 670.521484375 387.69921875 729.2890625 388.8896484375001C794.1240234375 390.1982421875001 752.3681640625001 322.5087890625 770.92578125 290.5078125C802.5693359375 270.759765625 870.4970703125 313.2294921875001 869.6640625 248.990234375C868.9501953125 189.6259765625 806.1376953125 225.91015625 772.4716796875 210.8017578125L772.4716796875 210.8017578125z" />
13
- <glyph glyph-name="arrow"
14
- unicode="&#xE002;"
15
- horiz-adv-x="1000" d="M77.2744140625 189.03125H522.251953125H922.9482421874998C991.5166015624998 189.03125 1025.8007812499998 283.4316406249999 977.2324218749998 338.7685546875L607.2480468749999 760.3115234375C547.9638671874999 827.8544921875 451.5429687499999 827.8544921875 392.2597656249999 760.3115234375L251.5507812500001 599.9921875L22.2744140625 338.7685546875C-25.578125 283.431640625 8.7060546875 189.03125 77.2744140625 189.03125z" />
16
- </font>
17
- </defs>
18
- </svg>
Binary file
@@ -1,18 +0,0 @@
1
- <?xml version="1.0" standalone="no"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
- <svg xmlns="http://www.w3.org/2000/svg">
4
- <defs>
5
- <font id="Nova-Font" horiz-adv-x="1000">
6
- <font-face font-family="Nova-Font"
7
- units-per-em="1000" ascent="1000"
8
- descent="0" />
9
- <missing-glyph horiz-adv-x="0" />
10
- <glyph glyph-name="add-user"
11
- unicode="&#xE001;"
12
- horiz-adv-x="1000" d="M18.01171875 145.3720703125C18.01171875 230.4296875 52.6298828125 291.6953125 130.431640625 324.529296875C168.6845703125 340.4853515624999 207.8525390625 354.150390625 247.728515625 365.4521484375C312.919921875 384.2480468749999 356.3408203125 416.1298828125 332.0732421875 501.544921875C296.384765625 526.05078125 269.0234375 576.2529296875 255.4609375 619.3173828125C227.7421875 708.1826171875 212.515625 805.375 255.4609375 896.73828125C291.982421875 974.18359375 361.337890625 1000.236328125 441.5185546875 999.998046875C588.5556640625 999.998046875 675.3984375 882.1064453125 654.69921875 736.97265625C646.2529296875 677.4912109375 648.2753906250001 620.626953125 609.017578125 571.7333984375C600.771484375 558.421875 591.2919921875001 545.9150390625 580.7041015625 534.37890625C415.583984375 396.0263671875 395.00390625 346.775390625 422.6025390625 145.3720703125L18.01171875 145.3720703125zM954.484375 362.1220703125C941.7001953125 387.767578125 924.5517578125002 410.9951171875 903.806640625 430.763671875C902.2597656250002 432.4296875 900.5947265625001 433.9755859375 899.0478515625 435.4033203125C868.904296875 462.7607421875 832.572265625 482.3964843749999 793.1708984375 492.6240234375C790.5537109375 493.2187500000001 787.8173828125 493.9326171875001 785.0810546875 494.408203125C767.2080078125 498.4873046875 748.9287109375 500.5224609375 730.595703125 500.4755859375C707.5869140625 500.5234375 684.6845703125 497.3603515625 662.5498046875 491.0771484375001L656.1259765625 489.1738281250001C615.2773437500001 476.3525390625001 578.41015625 453.2490234375001 549.0595703125001 422.0791015625001L549.0595703125001 422.0791015625001C507.7802734375001 378.4111328125 483.6953125000001 321.2822265625 481.2509765625001 261.2421875C481.2509765625001 257.6738281250001 481.2509765625001 254.1044921875001 481.2509765625001 250.4169921875V248.39453125C481.2509765625001 240.423828125 481.2509765625001 232.572265625 482.5595703125 224.6015625C482.5595703125 221.8652343749999 482.5595703125 219.1289062499999 483.5117187500001 216.51171875C495.9794921875001 123.6474609375 559.3623046875 45.5673828125 647.6796875 14.2753906249999C671.9248046875 5.6201171874999 697.3720703125 0.8037109375 723.1025390625001 0C725.9570312500001 0 728.8125000000001 0 731.6679687500001 0C734.5224609375001 0 737.3779296875 0 740.232421875 0C773.4423828125 0.9912109375 806.1044921875 8.7216796875 836.2353515625001 22.7216796875C961.6513671875 80.2304687500001 1016.7011718750002 228.51953125 959.1923828125002 353.9355468750001C957.912109375 356.7285156250001 956.5800781250002 359.4970703125001 955.1972656250002 362.2402343750001L954.484375 362.1220703125zM772.4716796875 210.8017578125C748.6787109374999 181.4179687499999 796.263671875 107.8994140625 727.0283203125 111.23046875C671.2353515625 113.966796875 707.3994140625 177.373046875 692.0537109375 209.13671875C659.3388671875 229.1220703125 591.5302734375 187.0097656249999 592.36328125 251.25C593.0771484375 310.7314453125 656.484375 272.7822265625 691.578125 291.578125C707.6376953125001 324.5302734375001 670.521484375 387.69921875 729.2890625 388.8896484375001C794.1240234375 390.1982421875001 752.3681640625001 322.5087890625 770.92578125 290.5078125C802.5693359375 270.759765625 870.4970703125 313.2294921875001 869.6640625 248.990234375C868.9501953125 189.6259765625 806.1376953125 225.91015625 772.4716796875 210.8017578125L772.4716796875 210.8017578125z" />
13
- <glyph glyph-name="arrow"
14
- unicode="&#xE002;"
15
- horiz-adv-x="1000" d="M77.2744140625 189.03125H522.251953125H922.9482421874998C991.5166015624998 189.03125 1025.8007812499998 283.4316406249999 977.2324218749998 338.7685546875L607.2480468749999 760.3115234375C547.9638671874999 827.8544921875 451.5429687499999 827.8544921875 392.2597656249999 760.3115234375L251.5507812500001 599.9921875L22.2744140625 338.7685546875C-25.578125 283.431640625 8.7060546875 189.03125 77.2744140625 189.03125z" />
16
- </font>
17
- </defs>
18
- </svg>
@@ -1,31 +0,0 @@
1
-
2
-
3
- @font-face {
4
- font-family: 'Epiled';
5
- src:
6
- url('../assets/fonts/Epiled/Epiled.woff2') format('woff2'),
7
- url('../assets/fonts/Epiled/Epiled.woff') format('woff'),
8
- url('../assets/fonts/Epiled/Epiled.ttf') format('truetype');
9
- font-weight: normal;
10
- font-style: normal;
11
- font-display: swap;
12
- }
13
-
14
- [class^="icon-"], [class*=" icon-"] {
15
- font-family: 'Epiled' !important;
16
- speak: none;
17
- font-style: normal;
18
- font-weight: normal;
19
- font-variant: normal;
20
- text-transform: none;
21
- line-height: 1;
22
- -webkit-font-smoothing: antialiased;
23
- -moz-osx-font-smoothing: grayscale;
24
- }
25
-
26
- .icon-add-user::before {
27
- content: "\e001";
28
- }
29
- .icon-arrow::before {
30
- content: "\e002";
31
- }
@@ -1,31 +0,0 @@
1
-
2
-
3
- @font-face {
4
- font-family: 'Nova-Font';
5
- src:
6
- url('../assets/fonts/Nova-Font/Nova-Font.woff2') format('woff2'),
7
- url('../assets/fonts/Nova-Font/Nova-Font.woff') format('woff'),
8
- url('../assets/fonts/Nova-Font/Nova-Font.ttf') format('truetype');
9
- font-weight: normal;
10
- font-style: normal;
11
- font-display: swap;
12
- }
13
-
14
- [class^="icon-"], [class*=" icon-"] {
15
- font-family: 'Nova-Font' !important;
16
- speak: none;
17
- font-style: normal;
18
- font-weight: normal;
19
- font-variant: normal;
20
- text-transform: none;
21
- line-height: 1;
22
- -webkit-font-smoothing: antialiased;
23
- -moz-osx-font-smoothing: grayscale;
24
- }
25
-
26
- .icon-add-user::before {
27
- content: "\e001";
28
- }
29
- .icon-arrow::before {
30
- content: "\e002";
31
- }
@@ -1,73 +0,0 @@
1
-
2
- <html lang="pt-br">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Preview — Epiled</title>
6
- <link rel="stylesheet" href="./css/epiled.css" />
7
- <style>
8
- body {
9
- font-family: sans-serif;
10
- background: #fafafa;
11
- padding: 32px;
12
- }
13
- h1 {
14
- font-size: 20px;
15
- margin-bottom: 24px;
16
- }
17
- input {
18
- padding: 8px;
19
- font-size: 14px;
20
- width: 300px;
21
- margin-bottom: 24px;
22
- }
23
- .grid {
24
- display: grid;
25
- grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
26
- gap: 16px;
27
- }
28
- .icon-box {
29
- text-align: center;
30
- background: #fff;
31
- border-radius: 8px;
32
- padding: 12px;
33
- border: 1px solid #eee;
34
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
35
- }
36
- .icon-box i {
37
- font-size: 32px;
38
- color: #333;
39
- }
40
- .icon-name {
41
- font-size: 12px;
42
- color: #666;
43
- margin-top: 6px;
44
- word-break: break-all;
45
- }
46
- </style>
47
- </head>
48
- <body>
49
- <h1>Pré-visualização: Epiled</h1>
50
- <input
51
- type="text"
52
- id="search"
53
- placeholder="Buscar ícone..."
54
- onkeyup="filterIcons()"
55
- />
56
- <div class="grid" id="icons">
57
- <div class="icon-box" data-name="icon-add-user">
58
- <i class="icon icon-add-user"></i>
59
- <div class="icon-name">icon-add-user</div>
60
- </div>
61
- <div class="icon-box" data-name="icon-arrow">
62
- <i class="icon icon-arrow"></i>
63
- <div class="icon-name">icon-arrow</div>
64
- </div>
65
- </div>
66
- <script>
67
- function filterIcons() { const term =
68
- document.getElementById('search').value.toLowerCase();
69
- document.querySelectorAll('.icon-box').forEach(box => { box.style.display
70
- = box.dataset.name.toLowerCase().includes(term) ? '' : 'none'; }); }
71
- </script>
72
- </body>
73
- </html>
Binary file
@@ -1,23 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
5
- <g>
6
- <path d="M18.444,875.139c0-87.099,35.449-149.835,115.118-183.457c39.171-16.339,79.279-30.332,120.112-41.905
7
- c66.756-19.247,111.219-51.894,86.369-139.359c-36.545-25.094-64.563-76.501-78.451-120.599
8
- c-28.384-90.998-43.976-190.523,0-284.079C298.99,26.436,370.01-0.242,452.115,0.002c150.566,0,239.493,120.721,218.297,269.338
9
- c-8.649,60.909-6.578,119.138-46.778,169.205c-8.444,13.631-18.151,26.438-28.993,38.251
10
- C425.558,618.469,404.484,668.902,432.745,875.139L18.444,875.139z"/>
11
- <path d="M977.392,653.187c-13.091-26.261-30.651-50.046-51.894-70.289c-1.584-1.706-3.289-3.289-4.873-4.751
12
- c-30.867-28.014-68.071-48.121-108.418-58.594c-2.68-0.609-5.482-1.34-8.284-1.827c-18.302-4.177-37.02-6.261-55.793-6.213
13
- c-23.561-0.049-47.013,3.19-69.679,9.624l-6.578,1.949c-41.829,13.129-79.581,36.787-109.636,68.705l0,0
14
- c-42.27,44.716-66.933,103.216-69.436,164.697c0,3.654,0,7.309,0,11.085v2.071c0,8.162,0,16.202,1.34,24.364
15
- c0,2.802,0,5.604,0.975,8.284c12.767,95.093,77.671,175.047,168.108,207.09c24.827,8.863,50.885,13.795,77.233,14.618
16
- c2.923,0,5.847,0,8.771,0c2.923,0,5.847,0,8.77,0c34.007-1.015,67.453-8.931,98.307-23.267
17
- c128.426-58.889,184.797-210.737,125.908-339.163c-1.311-2.86-2.675-5.695-4.091-8.504L977.392,653.187z M791.011,808.139
18
- c-24.364,30.089,24.363,105.372-46.534,101.961c-57.132-2.802-20.1-67.73-35.814-100.256
19
- c-33.5-20.465-102.936,22.658-102.083-43.124c0.731-60.909,65.66-22.049,101.596-41.296c16.445-33.743-21.562-98.428,38.616-99.647
20
- c66.391-1.34,23.633,67.974,42.636,100.743c32.403,20.222,101.961-23.267,101.108,42.514
21
- C889.805,829.823,825.485,792.668,791.011,808.139L791.011,808.139z"/>
22
- </g>
23
- </svg>
@@ -1,9 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
5
- <g>
6
- <path d="M79.129,830.432h455.657h410.313c70.214,0,105.321-96.666,55.587-153.331l-378.864-431.66
7
- c-60.707-69.164-159.442-69.164-220.148,0L257.588,409.608L22.809,677.101C-26.192,733.766,8.915,830.432,79.129,830.432z"/>
8
- </g>
9
- </svg>
@@ -1,20 +0,0 @@
1
- // Default configuration
2
-
3
- const fontName = "Epiled";
4
-
5
- const defaultConfig = {
6
- inputDir: "src/assets/svg/icons-ui",
7
- outputDir: `dist/assets/fonts/${fontName}`,
8
- font: {
9
- fontName: fontName,
10
- folderName: fontName,
11
- fontFileName: fontName,
12
- fontPath: "../assets/fonts",
13
- },
14
- css: {
15
- cssClass: "icon-",
16
- cssFileName: fontName.toLowerCase(),
17
- },
18
- };
19
-
20
- export { defaultConfig };