Comments (7)
Hi, @glenngr I researched a bit why this doesn't work for you and I figured out that there is still something wrong in the description of my post. Sorry for that 😥
The issue is that the showcase I was using used the library from the projects
folder instead of the dist
folder. In such cases, the output is different because we are missing the library build step. The library is built as part of the showcase build an therefore the tree shaking is working.
However, I also used svg-to-ts
in a big enterprise client, and there tree shakable icons are working. Basically you need to let svg-to-ts
handle the icons and not ng-packagr
. ng-packagr
produces one big bundle with all icons that break tree shaking. To let svg-to-ts
handle the icon compilation you have two options:
- Provide the icons as a standalone library. With this approach icons are provided standalone and can be used framework agnostic throughout the various projects. If you consider this approach I would recommend you to check out the starter project we added in the linked PR to the
README
svg-icon-library-starter. - If you want to have your icons in an Angular workspace you should treat this folder as an assets folder. So basically, put your icons in there, exclude it from the ng build and use
svg-to-ts
to build the icons into thedist
folder.
from svg-to-ts.
@kreuzerk Thanks for answering. It works fine when the files from the dist folder.
I'm not sure the ng-packagr converter I mentioned earlier is needed now.
Let me know if you want to have a look anyway. It basically just creates one package subentry for each icon, but the build process is much slower compared to the way you do it now.
I did experiment with creating an angular builder for svg-to-ts, making you able to just run ng run icons:build
to produce the tree-shakeable icon files.
The cool thing about it is that if you use it inside an Nx Workspace, nx can cache the build output and you can even configure nx to know that it has to rebuild the library if a new svg-file is added to the svg-directory or if the svg-to-ts configuration changes in package.json.
I think I also want to create some angular-cli schematics to set up the projects you need to create an icon library using svg-to-ts.
Do you think this belongs in a separate project, or would you be interested in having it as part of this repo?
from svg-to-ts.
Here is my svg-to-ts config
"svg-to-ts": {
"srcFiles": [
"./libs/shared/ui/icons/svg/**/*.svg"
],
"outputDirectory": "./libs/shared/ui/icons/src",
"interfaceName": "Icon",
"typeName": "SvgIcon",
"prefix": "svg",
"iconsFolderName": "lib",
"optimizeForLazyLoading": true,
"modelFileName": "svg-icon.model",
"additionalModelFile": "./libs/shared/ui/icons/src",
"conversionType": "files",
"delimiter": "KEBAB",
"compileSources": false,
"svgoConfig": {
"plugins": [
{
"cleanupAttrs": true
}
]
}
}
from svg-to-ts.
I've forked the repo and built a prototype ng-package converter.
Let me know if you want to take a look. I can open a PR
from svg-to-ts.
Hi @glenngr
Thanks a lot for this issue. Curious why it didn't work. If I find some time I will try to invest why the sample repo did not work. I would definitely be interested in the ng-package converter you created.
from svg-to-ts.
Hi @glenngr glad to hear that it is working now. 👍
I really like the idea of having an Angular builder. In fact, we already have an issue with that. Also, a possible usage with Nx sounds very interesting. The same goes for the schematics to scaffold a library project.
Generally, I think that the Angular builder and the schematics should be in a dedicated project. I imagine the builder as a sort of wrapper around svg-to-ts
. The reason why I think it should be in a separate project is that svg-to-ts
can also be used by other projects that use Vanilla JS, TypeScript, Vue, React etc...
Although, it would be nice to have everything somehow grouped together. Maybe we could think of adding an organization and put all projects to it.
from svg-to-ts.
I am facing the same issue if I try to keep the library as Angular one as tree-shaking works with "conversionType": "files"
but unfortunately looks like to achieve tree-shaking + lazy-loading it requires either having 1 secondary entry point per TS icon or copy the compiled sources after building the library as @kreuzerk pointed out. The downside of the second approach is trying to figure out how to alias the import paths in a nx workspace.
from svg-to-ts.
Related Issues (20)
- `svg-to-ts-files` always generate a single file HOT 2
- Deliver correct ESM
- svg - same id of path generated for all icons HOT 1
- update to svgo version 3.x HOT 1
- Run within a module repository HOT 1
- How to customize size and apply primary color HOT 6
- Unexpected viewBox removal HOT 1
- Possibility to extract only the "d" attribute of the path HOT 1
- 'svg-to-ts' is not recognized as an internal or external command (Angular 15) HOT 5
- SVG not completely converted HOT 1
- Config option "tsx: true" error: Parameter 'props' implicitly has an 'any' type. HOT 3
- Threeshaking not working HOT 1
- Only converting new files
- Expression produces a union type that is too complex to represent. HOT 1
- Tutorial requires a paid Medium account HOT 2
- Option to use existing dir structure when using globs
- When generating an interface, Icon's do not implement the Interface
- Option to generate constant name in uppercase HOT 1
- Add support for verbatimModuleSyntax HOT 4
- Incorrect conversion to React component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg-to-ts.