Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore((svgo) update svgo to v2): update svgo to v2 - config object ch… #133

Merged
merged 1 commit into from
Oct 5, 2021
Merged

chore((svgo) update svgo to v2): update svgo to v2 - config object ch… #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 37 additions & 36 deletions README.md
View file
Open in desktop
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