Skip to content

Commit

Permalink
Merge pull request #133 from kreuzerk/feature/upgradeSVGO
Browse files Browse the repository at this point in the history 
chore((svgo) update svgo to v2): update svgo to v2 - config object ch…
  • Loading branch information
@nivekcode
nivekcode authored Oct 5, 2021
2 parents f6e8448 + 688223e commit 539aa07
Show file tree
Hide file tree
Showing 9 changed files with 157 additions and 312 deletions.
73 changes: 37 additions & 36 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
![Logo](https://raw.githubusercontent.com/kreuzerk/svg-to-ts/master/assets/logo.png)

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
Expand Down Expand Up @@ -33,6 +35,7 @@
- [Available options:](#available-options-2)
- [Example usage](#example-usage-2)
- [Sample output](#sample-output-1)
- [SVGO - SVG optimization](#svgo---svg-optimization)
- [Starter project](#starter-project)
- [Angular builder](#angular-builder)
- [FAQ](#faq)
Expand Down Expand Up @@ -129,9 +132,7 @@ const svgToTsConfig = {
barrelFileName: "generated-icons-barrel",
svgoConfig: {
plugins: [
{
cleanupAttrs: true,
},
'cleanupAttrs'
],
},
compileSources: false,
Expand Down Expand Up @@ -161,11 +162,7 @@ Once you run `svg-to-ts` those configurations will be picked up. The config obje
"typeName": "dinosaurIcon",
"prefix": "dinosaurIcon",
"svgoConfig": {
"plugins": [
{
"cleanupAttrs": true
}
]
"plugins": ["cleanupAttrs"]
},
"fileName": "dinosaur-icon.model",
"additionalModelFile": "./projects/dinosaur-icons/src/lib",
Expand All @@ -190,11 +187,7 @@ Once you run `svg-to-ts` those configurations will be picked up.
"prefix": "dinosaurIcon",
"fileName": "dinosaur-icon.model",
"svgoConfig": {
"plugins": [
{
"cleanupAttrs": true
}
]
"plugins": ["cleanupAttrs"]
},
"additionalModelFile": "./projects/dinosaur-icons/src/lib",
"compileSources": true
Expand Down Expand Up @@ -226,15 +219,15 @@ accepts an object with the filename as key and the svg data as key.

#### Available options:

| --version | type | default | description |
| --------------- | -------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------- |
| fileName | string | my-icons | file name of the generated file |
| delimiter | CAMEL, KEBAB, SNAKE, UPPER | CAMEL | delimiter which is used to generate the types and name properties |
| svgoConfig | string or config object | check help command - to large to display | a path to your svgoConfiguration JSON file or an inline configuration object |
| srcFiles | string | "/\*.svg" | input files matching the given filename pattern |
| outputDirectory | string | "./dist" | name of the output directory |
| objectName | string | default - export | name of the exported const - if nothing is set - default export will be used |
| verbose | boolean | false | defines if the log should contain additional information. Can be useful for debugging |
| --version | type | default | description |
| --------------- | -------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------- |
| fileName | string | my-icons | file name of the generated file |
| delimiter | CAMEL, KEBAB, SNAKE, UPPER | CAMEL | delimiter which is used to generate the types and name properties |
| svgoConfig | null or config object | check help command - to large to display | by default we search for a svgo.config.js file in the root or an inline configuration object |
| srcFiles | string | "/\*.svg" | input files matching the given filename pattern |
| outputDirectory | string | "./dist" | name of the output directory |
| objectName | string | default - export | name of the exported const - if nothing is set - default export will be used |
| verbose | boolean | false | defines if the log should contain additional information. Can be useful for debugging |

#### Example usage

Expand Down Expand Up @@ -271,19 +264,19 @@ Only the icons included in the consuming SPA also end up in the final bundle of

#### Available options:

| --version | type | default | description |
| ------------------ | -------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------- |
| typeName | string | myIcons | name of the generated type |
| generateType | boolean | false | prevent generating enumeration type |
| generateTypeObject | boolean | false | generate type object |
| prefix | string | myIcon | prefix for the generated svg constants |
| interfaceName | string | MyIcon | name for the generated interface |
| fileName | string | my-icons | file name of the generated file |
| delimiter | CAMEL, KEBAB, SNAKE, UPPER | SNAKE | delimiter which is used to generate the types and name properties |
| svgoConfig | string or config object | check help command - to large to display | a path to your svgoConfiguration JSON file or an inline configuration object |
| srcFiles | string | "/\*.svg" | input files matching the given filename pattern |
| outputDirectory | string | "./dist" | name of the output directory |
| verbose | boolean | false | defines if the log should contain additional information. Can be useful for debugging |
| --version | type | default | description |
| ------------------ | -------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------- |
| typeName | string | myIcons | name of the generated type |
| generateType | boolean | false | prevent generating enumeration type |
| generateTypeObject | boolean | false | generate type object |
| prefix | string | myIcon | prefix for the generated svg constants |
| interfaceName | string | MyIcon | name for the generated interface |
| fileName | string | my-icons | file name of the generated file |
| delimiter | CAMEL, KEBAB, SNAKE, UPPER | SNAKE | delimiter which is used to generate the types and name properties |
| svgoConfig | null or config object | check help command - to large to display | by default we search for a svgo.config.js file in the root or an inline configuration object |
| srcFiles | string | "/\*.svg" | input files matching the given filename pattern |
| outputDirectory | string | "./dist" | name of the output directory |
| verbose | boolean | false | defines if the log should contain additional information. Can be useful for debugging |

#### Example usage

Expand Down Expand Up @@ -357,7 +350,7 @@ end up there.
| modelFileName | string | my-icons | file name of the generated file |
| delimiter | CAMEL, KEBAB, SNAKE, UPPER | SNAKE | delimiter which is used to generate the types and name properties |
| srcFiles | string | "/\*.svg" | input files matching the given filename pattern |
| svgoConfig | string or config object | check help command - to large to display | a path to your svgoConfiguration JSON file or an inline configuration object |
| svgoConfig | null or config object | check help command - to large to display | by default we search for a svgo.config.js file in the root or an inline configuration object |
| outputDirectory | string | "./dist" | name of the output directory |
| additionalModelOutputPath | string | null | if a path is specified we will generate an additional file containing interface and type to this path - can be useful to improve type safety |
| iconsFolderName | string | "build" | name of the folder we will build the TypeScript files to |
Expand All @@ -381,6 +374,14 @@ and we end up with the following file in our `dist` folder.

![Output scenario two](https://raw.githubusercontent.com/kreuzerk/svg-to-ts/master/assets/generated-files-src2.png)

# SVGO - SVG optimization

Under the hood we use the [svgo](https://github.com/svg/svgo) project to optimize the svg icons. To configure SVGO
you can add a `svgo.config.js` file to your root. Check out the official [svgo](https://github.com/svg/svgo) page
for further docs about the configuration.

**Note: If you dont pass any options, svgo will apply some default options ([more](https://github.com/svg/svgo))**

# Starter project

If you want to build a standalone icon library we recommend you to checkout the [svg-icon-lib-starter](https://github.com/kreuzerk/svg-icon-library-starter) project on GitHub. This project allows you to build an astonishing framework-agnostic SVG icon library with ease. Out of the box icon optimization, build process, and icon showcase. 🚀
Expand Down
Loading

0 comments on commit 539aa07

Please sign in to comment.