https://github.com/hunghg255/svg-to-css-demo
https://github.com/hunghg255/svg-to-css-demo
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hunghg255/svg-to-css-demo
- Owner: hunghg255
- Created: 2023-12-20T12:18:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-03T17:40:10.000Z (over 1 year ago)
- Last Synced: 2025-01-23T05:14:35.317Z (9 months ago)
- Language: HTML
- Size: 347 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Setup convert svg to css icon
## Install pkg
```sh
npm install csvgtocss -D
```
## Add script to package.json
```json
"scripts": {
"genicon": "csvgtocss"
},
```
- Create file `svgtocss.config.{js|ts}`
```ts
import { defineConfig } from 'csvgtocss';
export default defineConfig({
src: 'public/svgicon', // svg path
dist: 'public/svgcss', // output path
prefix: 'icon', // font name,
exportJson: true, // export json file
});
```
- Run script
```sh
npm run genicon
```
## Preview Icon
- Install [iconify-preview](https://marketplace.visualstudio.com/items?itemName=hunghg255.iconify-preview)
- Config `.vscode/settings.json` read file json icon which generate after run script
```json
{
"iconify.color": "#ddd",
"iconify.customCollectionJsonPaths": ["./public/svgcss/icon-collection.json"], // path json file
"iconify.delimiters": ["-"],
"iconify.prefixes": ["", "icon"],
"iconify.inplace": false,
"iconify.annotations": true,
"iconify.languageIds": ["typescript", "typescriptreact"]
}
```