https://github.com/hunghg255/csvgtocss
Convert svg to css icon
https://github.com/hunghg255/csvgtocss
icon svg svg-to-css
Last synced: 3 months ago
JSON representation
Convert svg to css icon
- Host: GitHub
- URL: https://github.com/hunghg255/csvgtocss
- Owner: hunghg255
- License: mit
- Created: 2023-12-19T18:12:31.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-14T08:32:35.000Z (9 months ago)
- Last Synced: 2025-06-09T14:50:25.262Z (4 months ago)
- Topics: icon, svg, svg-to-css
- Language: TypeScript
- Homepage: https://svg-to-css.surge.sh
- Size: 1.37 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A script converts svg file to icons
## Demo
[Github](https://github.com/hunghg255/csvgtocss)
[Demo](https://svg-to-css.surge.sh)
## Install
```bash
npm i csvgtocss@latest --save-dev
```
## Setup
### Create file: `svgtocss.config.{ts,js,mjs}`
```js
import { defineConfig } from 'csvgtocss';
export default defineConfig({
src: 'svg', // svg path
dist: 'dist', // output path
prefix: 'csvgtocss', // font name
exportJson: true, // export json file
});
```
## CLI (file package.json)
```
-c: Config
```
```json
{
...
"scripts": {
...
"csvgtocss": "csvgtocss",
},
...
}
```
### Custom config file
- You can also use a custom config file instead of `svgtocss.config.{ts,js,mjs}`. Just create `.config.{ts,js,mjs}` to build command
```js
Exp: awesome.config.ts;
```
```json
{
...
"scripts": {
...
"csvgtocss": "csvgtocss -c awesome",
},
...
}
```
## 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"]
}
```
### About
Gia Hung – [hung.hg](https://hung.thedev.id)