Skip to content

Commit 4886eef

Browse files
nivekcodenivekcode
committed
feat(convertionOptions): add new convertion options
BREAKING-CHANGE: add new convertion options (object, constants and files). Convertion option is now mandatory
1 parent 20a2559 commit 4886eef

File tree

3 files changed

+151
-30
lines changed

3 files changed

+151
-30
lines changed

‎CHANGELOG.md

+101-18
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,141 @@
1-
# [4.3.0](https://github.com/kreuzerk/svg-to-ts/compare/v4.2.3...v4.3.0) (2020-06-04)
1+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+
4+
**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_
5+
6+
- [4.3.0 (2020-06-04)](#430-2020-06-04)
7+
- [Features](#features)
8+
- [4.2.3 (2020-06-04)](#423-2020-06-04)
9+
- [Bug Fixes](#bug-fixes)
10+
- [4.2.2 (2020-05-05)](#422-2020-05-05)
11+
- [Bug Fixes](#bug-fixes-1)
12+
- [4.2.1 (2020-04-12)](#421-2020-04-12)
13+
- [Bug Fixes](#bug-fixes-2)
14+
- [4.2.0 (2020-04-12)](#420-2020-04-12)
15+
- [Features](#features-1)
16+
- [4.1.1 (2020-03-28)](#411-2020-03-28)
17+
- [Bug Fixes](#bug-fixes-3)
18+
- [4.1.0 (2020-03-25)](#410-2020-03-25)
19+
- [Bug Fixes](#bug-fixes-4)
20+
- [Features](#features-2)
21+
- [4.0.5 (2020-03-25)](#405-2020-03-25)
22+
- [Bug Fixes](#bug-fixes-5)
23+
- [4.0.4 (2020-03-25)](#404-2020-03-25)
24+
- [Bug Fixes](#bug-fixes-6)
25+
- [4.0.3 (2020-03-23)](#403-2020-03-23)
26+
- [Bug Fixes](#bug-fixes-7)
27+
- [4.0.2 (2020-03-23)](#402-2020-03-23)
28+
- [Bug Fixes](#bug-fixes-8)
29+
- [4.0.1 (2020-03-23)](#401-2020-03-23)
30+
- [Bug Fixes](#bug-fixes-9)
31+
- [4.0.0 (2020-03-23)](#400-2020-03-23)
32+
- [Features](#features-3)
33+
- [BREAKING CHANGES](#breaking-changes)
34+
- [3.5.1 (2020-03-18)](#351-2020-03-18)
35+
- [Bug Fixes](#bug-fixes-10)
36+
- [3.5.0 (2020-03-15)](#350-2020-03-15)
37+
- [Features](#features-4)
38+
- [3.4.0 (2020-03-15)](#340-2020-03-15)
39+
- [Features](#features-5)
40+
- [3.3.2 (2020-03-11)](#332-2020-03-11)
41+
- [Bug Fixes](#bug-fixes-11)
42+
- [3.3.1 (2020-03-10)](#331-2020-03-10)
43+
- [Bug Fixes](#bug-fixes-12)
44+
- [3.3.0 (2020-03-08)](#330-2020-03-08)
45+
- [Features](#features-6)
46+
- [3.2.1 (2020-03-05)](#321-2020-03-05)
47+
- [Bug Fixes](#bug-fixes-13)
48+
- [3.2.0 (2020-03-05)](#320-2020-03-05)
49+
- [Features](#features-7)
50+
- [3.1.4 (2020-03-04)](#314-2020-03-04)
51+
- [Bug Fixes](#bug-fixes-14)
52+
- [3.1.3 (2020-03-04)](#313-2020-03-04)
53+
- [Bug Fixes](#bug-fixes-15)
54+
- [3.1.2 (2020-03-04)](#312-2020-03-04)
55+
- [Bug Fixes](#bug-fixes-16)
56+
- [3.1.1 (2020-03-04)](#311-2020-03-04)
57+
- [Bug Fixes](#bug-fixes-17)
58+
- [3.1.0 (2020-03-04)](#310-2020-03-04)
59+
- [Features](#features-8)
60+
- [3.0.0 (2020-02-25)](#300-2020-02-25)
61+
- [Features](#features-9)
62+
- [BREAKING CHANGES](#breaking-changes-1)
63+
- [2.2.1 (2020-02-10)](#221-2020-02-10)
64+
- [Bug Fixes](#bug-fixes-18)
65+
- [2.2.0 (2019-12-31)](#220-2019-12-31)
66+
- [Features](#features-10)
67+
- [2.1.0 (2019-12-13)](#210-2019-12-13)
68+
- [Bug Fixes](#bug-fixes-19)
69+
- [Features](#features-11)
70+
- [2.0.3 (2019-12-10)](#203-2019-12-10)
71+
- [Bug Fixes](#bug-fixes-20)
72+
- [2.0.2 (2019-12-10)](#202-2019-12-10)
73+
- [Bug Fixes](#bug-fixes-21)
74+
- [2.0.1 (2019-12-10)](#201-2019-12-10)
75+
- [Bug Fixes](#bug-fixes-22)
76+
- [2.0.0 (2019-12-10)](#200-2019-12-10)
77+
- [Features](#features-12)
78+
- [BREAKING CHANGES](#breaking-changes-2)
79+
- [1.1.2 (2019-12-09)](#112-2019-12-09)
80+
- [Bug Fixes](#bug-fixes-23)
81+
- [1.1.1 (2019-12-09)](#111-2019-12-09)
82+
- [Bug Fixes](#bug-fixes-24)
83+
- [1.1.0 (2019-12-09)](#110-2019-12-09)
84+
- [Features](#features-13)
85+
- [1.0.1 (2019-12-05)](#101-2019-12-05)
86+
- [Bug Fixes](#bug-fixes-25)
87+
- [1.0.0 (2019-11-21)](#100-2019-11-21)
88+
- [Features](#features-14)
89+
90+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
291

92+
# [4.3.0](https://github.com/kreuzerk/svg-to-ts/compare/v4.2.3...v4.3.0) (2020-06-04)
393

494
### Features
595

6-
* **svgo:** automatically prefix svg ids with filename ([5bb989b](https://github.com/kreuzerk/svg-to-ts/commit/5bb989b5a8238e9d7c865d01a5b4a8852fbdba96))
96+
- **svgo:** automatically prefix svg ids with filename ([5bb989b](https://github.com/kreuzerk/svg-to-ts/commit/5bb989b5a8238e9d7c865d01a5b4a8852fbdba96))
797

898
## [4.2.3](https://github.com/kreuzerk/svg-to-ts/compare/v4.2.2...v4.2.3) (2020-06-04)
999

10-
11100
### Bug Fixes
12101

13-
* **svgo:** correctly pick up options from external config file ([9b8d138](https://github.com/kreuzerk/svg-to-ts/commit/9b8d138ddf080fe80cf29f83a2dca54c6c3b5eaa))
102+
- **svgo:** correctly pick up options from external config file ([9b8d138](https://github.com/kreuzerk/svg-to-ts/commit/9b8d138ddf080fe80cf29f83a2dca54c6c3b5eaa))
14103

15104
## [4.2.2](https://github.com/kreuzerk/svg-to-ts/compare/v4.2.1...v4.2.2) (2020-05-05)
16105

17-
18106
### Bug Fixes
19107

20-
* **prefix:** allow empty prefixes ([6fa8f1f](https://github.com/kreuzerk/svg-to-ts/commit/6fa8f1f1f9ac61b71b75cef3ec2c48b4e1115242))
108+
- **prefix:** allow empty prefixes ([6fa8f1f](https://github.com/kreuzerk/svg-to-ts/commit/6fa8f1f1f9ac61b71b75cef3ec2c48b4e1115242))
21109

22110
## [4.2.1](https://github.com/kreuzerk/svg-to-ts/compare/v4.2.0...v4.2.1) (2020-04-12)
23111

24-
25112
### Bug Fixes
26113

27-
* **docs:** add missing options for single file conversion ([0c6c3e1](https://github.com/kreuzerk/svg-to-ts/commit/0c6c3e1684b3532d436a6fef4d53b1998efe56a1))
114+
- **docs:** add missing options for single file conversion ([0c6c3e1](https://github.com/kreuzerk/svg-to-ts/commit/0c6c3e1684b3532d436a6fef4d53b1998efe56a1))
28115

29116
# [4.2.0](https://github.com/kreuzerk/svg-to-ts/compare/v4.1.1...v4.2.0) (2020-04-12)
30117

31-
32118
### Features
33119

34-
* **config:** add options to not generate type and to generate type object ([9e120b3](https://github.com/kreuzerk/svg-to-ts/commit/9e120b32342d470b2aef57563d775e7427b8913c))
35-
* **config:** add options to not generate type and to generate type object ([8bbec6f](https://github.com/kreuzerk/svg-to-ts/commit/8bbec6f1ee541027bb5bfc886122f58def6edac6))
120+
- **config:** add options to not generate type and to generate type object ([9e120b3](https://github.com/kreuzerk/svg-to-ts/commit/9e120b32342d470b2aef57563d775e7427b8913c))
121+
- **config:** add options to not generate type and to generate type object ([8bbec6f](https://github.com/kreuzerk/svg-to-ts/commit/8bbec6f1ee541027bb5bfc886122f58def6edac6))
36122

37123
## [4.1.1](https://github.com/kreuzerk/svg-to-ts/compare/v4.1.0...v4.1.1) (2020-03-28)
38124

39-
40125
### Bug Fixes
41126

42-
* **escaping:** Use template literals instead of ' quotes to encapsulate svgs, as the quote character can occur in svgs. ([a5fd0a4](https://github.com/kreuzerk/svg-to-ts/commit/a5fd0a42fb7809bcdd5492df7d3d6625386e6b88))
127+
- **escaping:** Use template literals instead of ' quotes to encapsulate svgs, as the quote character can occur in svgs. ([a5fd0a4](https://github.com/kreuzerk/svg-to-ts/commit/a5fd0a42fb7809bcdd5492df7d3d6625386e6b88))
43128

44129
# [4.1.0](https://github.com/kreuzerk/svg-to-ts/compare/v4.0.5...v4.1.0) (2020-03-25)
45130

46-
47131
### Bug Fixes
48132

49-
* **args:** update args ([09fdd27](https://github.com/kreuzerk/svg-to-ts/commit/09fdd274722c8da13327889099b81180c8a012ce))
50-
133+
- **args:** update args ([09fdd27](https://github.com/kreuzerk/svg-to-ts/commit/09fdd274722c8da13327889099b81180c8a012ce))
51134

52135
### Features
53136

54-
* **svgo:** use configuration to config svgo ([de279ae](https://github.com/kreuzerk/svg-to-ts/commit/de279ae76fdcc664b9dc5634bda340145cef2787))
55-
* **svgoconfig:** accept svgo config as parameter ([b2466e2](https://github.com/kreuzerk/svg-to-ts/commit/b2466e2a8fdde0effc20768ca943d635071fa2f6))
137+
- **svgo:** use configuration to config svgo ([de279ae](https://github.com/kreuzerk/svg-to-ts/commit/de279ae76fdcc664b9dc5634bda340145cef2787))
138+
- **svgoconfig:** accept svgo config as parameter ([b2466e2](https://github.com/kreuzerk/svg-to-ts/commit/b2466e2a8fdde0effc20768ca943d635071fa2f6))
56139

57140
## [4.0.5](https://github.com/kreuzerk/svg-to-ts/compare/v4.0.4...v4.0.5) (2020-03-25)
58141

‎README.md

+50-12
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,22 @@
1212
- [Configuration in package.json or .rc file](#configuration-in-packagejson-or-rc-file)
1313
- [Configure svg-to-ts over package.json](#configure-svg-to-ts-over-packagejson)
1414
- [Configure svg-to-ts over .rc file](#configure-svg-to-ts-over-rc-file)
15-
- [Use-cases](#use-cases)
16-
- [Use Case 1 - Treeshakable and typesafe with one file (simpler use cases)](#use-case-1---treeshakable-and-typesafe-with-one-file-simpler-use-cases)
15+
- [ConvertionTypes](#convertiontypes)
16+
- [1. Converting to a single object (`convertionType==='object'`)](#1-converting-to-a-single-object-convertiontypeobject)
17+
- [Available options:](#available-options)
1718
- [Example usage](#example-usage)
18-
- [Use Case 2 - Fully tree shakable and optimized for lazy loading (more sophisticated)](#use-case-2---fully-tree-shakable-and-optimized-for-lazy-loading-more-sophisticated)
19+
- [Sample output](#sample-output)
20+
- [2. Multiple constants - Treeshakable and typesafe with one file (`convertionType==='constants'`)](#2-multiple-constants---treeshakable-and-typesafe-with-one-file-convertiontypeconstants)
21+
- [Available options:](#available-options-1)
22+
- [Example usage](#example-usage-1)
23+
- [Sample ouput](#sample-ouput)
24+
- [3. Fully tree shakable and optimized for lazy loading (`convertionType==='files'`)](#3-fully-tree-shakable-and-optimized-for-lazy-loading-convertiontypefiles)
25+
- [Available options:](#available-options-2)
26+
- [Example usage](#example-usage-2)
27+
- [Sample output](#sample-output-1)
1928
- [FAQ](#faq)
2029
- [Which approach should I use](#which-approach-should-i-use)
21-
- [Standalone library](#standalone-library)
30+
- [Is it possilbe to create a standalone library?](#is-it-possilbe-to-create-a-standalone-library)
2231

2332
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
2433

@@ -45,7 +54,7 @@ are made with Angular, however `svg-to-ts` can also be used with other framework
4554
- `svg-to-ts` optimizes your SVG icons under the hood
4655
- `svg-to-ts` automatically generates types and interfaces for your icons to improve typesafety
4756
- `svg-to-ts` was developed based on the experiences of providin an icon library for a large enterprise.
48-
- offers three different convertion modes ('object', 'single-file' and 'multiple-files')
57+
- offers three different convertion modes ('object', 'constants' and 'files')
4958
- each method is highly configurable to supports multiple use cases.
5059

5160
# How to use svg-to-ts
@@ -79,7 +88,7 @@ Once you run `svg-to-ts` those configurations will be picked up.
7988
"generate-icons": "svg-to-ts"
8089
},
8190
"svg-to-ts": {
82-
"convertionType": "single-file",
91+
"convertionType": "constants",
8392
"srcFiles": ["./projects/dinosaur-icons/icons/**/*.svg"],
8493
"outputDirectory": "./projects/dinosaur-icons/icons",
8594
"interfaceName": "DinosaurIcon",
@@ -108,7 +117,7 @@ Once you run `svg-to-ts` those configurations will be picked up.
108117
```json
109118
{
110119
"svg-to-ts": {
111-
"convertionType": "single-file",
120+
"convertionType": "constants",
112121
"srcFiles": ["./projects/dinosaur-icons/icons/**/*.svg"],
113122
"outputDirectory": "./projects/dinosaur-icons/icons",
114123
"interfaceName": "DinosaurIcon",
@@ -151,7 +160,7 @@ to solve a specific kind of problem. You can switch between approaches by passin
151160
In this scenario the SVG icons are converted to a single object. It's an approach that is suitable if your icon registry
152161
accepts an object with the filename as key and the svg data as key.
153162

154-
Available options:
163+
#### Available options:
155164

156165
| --version | type | default | output the version number |
157166
| --------------- | ----------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- |
@@ -162,6 +171,19 @@ Available options:
162171
| outputDirectory | string | "./dist" | name of the output directory |
163172
| objectName | string | default - export | name of the exported const - if nothing is set - default export will be used |
164173

174+
#### Example usage
175+
176+
Let's say we have the following four svg files in a `inputfiles` folder.
177+
178+
- expressionless.svg
179+
- full.svg
180+
- laughing.svg
181+
- smiling-face.svg
182+
183+
We can now run
184+
`svg-to-ts.ts --convertionType object -s ./inputfiles -o ./dist`
185+
and we end up with the following file in our `dist` folder.
186+
165187
#### Sample output
166188

167189
```javascript
@@ -182,7 +204,7 @@ in combination with an icon registry. It furthermore also generates all necssary
182204
![Output scenario one](https://raw.githubusercontent.com/kreuzerk/svg-to-ts/master/assets/example-src1.png)
183205
Only the icons included in the consuming SPA also end up in the final bundle of the SPA.
184206

185-
Available configurations:
207+
#### Available options:
186208

187209
| --version | type | default | output the version number |
188210
| ------------------ | ----------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- |
@@ -207,7 +229,7 @@ Let's say we have the following four svg files in a `inputfiles` folder.
207229
- smiling-face.svg
208230

209231
We can now run
210-
`svg-to-ts.ts -s ./inputfiles -o ./dist -t sampleIcon -i SampleIcon -p sampleIcon`
232+
`svg-to-ts.ts --convertionType constants -s ./inputfiles -o ./dist`
211233
and we end up with the following file in our `dist` folder.
212234

213235
#### Sample ouput
@@ -254,9 +276,8 @@ end up together in a chunk. The `convertionOption = files` allows you to configu
254276
generated in a way that they can even be split to lazy loaded chunks. Means not only the amount of the icons in the chunk
255277
gets reduced, but also, where they end up. Means, an icon that is only used in a lazy loaded Angular feature module, will only
256278
end up there.
257-
![Output scenario two](https://raw.githubusercontent.com/kreuzerk/svg-to-ts/master/assets/generated-files-src2.png)
258279

259-
Available configurations:
280+
#### Available options:
260281

261282
| --version | type | default | output the version number |
262283
| ------------------------- | ----------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -274,6 +295,23 @@ Available configurations:
274295
| iconsFolderName | string | "build" | name of the folder we will build the TypeScript files to |
275296
| compileSources | boolean | false | If set to false, we generate a TypeScript file for each SVG. If set to true we will allready compile those TypeScript files and generate JavaScript files and declaration files |
276297

298+
#### Example usage
299+
300+
Let's say we have the following four svg files in a `inputfiles` folder.
301+
302+
- expressionless.svg
303+
- full.svg
304+
- laughing.svg
305+
- smiling-face.svg
306+
307+
We can now run
308+
`svg-to-ts.ts --convertionType files -s ./inputfiles -o ./dist`
309+
and we end up with the following file in our `dist` folder.
310+
311+
#### Sample output
312+
313+
![Output scenario two](https://raw.githubusercontent.com/kreuzerk/svg-to-ts/master/assets/generated-files-src2.png)
314+
277315
# FAQ
278316

279317
## Which approach should I use

‎assets/logo.png

1.92 KB
Loading

0 commit comments

Comments
 (0)