csvgtocss

Convert svg to css

Demo

Github

Demo

Install

npm i csvgtocss@latest --save-dev

Setup

Create file: svgtocss.config.{ts,js,mjs}

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

{
  ...
  "scripts": {
    ...
    "csvgtocss": "csvgtocss",
  },
  ...
}

Custom config file

• You can also use a custom config file instead of svgtocss.config.{ts,js,mjs}. Just create <FILE_NAME>.config.{ts,js,mjs} to build command

Exp: awesome.config.ts;

{
  ...
  "scripts": {
    ...
    "csvgtocss": "csvgtocss -c awesome",
  },
  ...
}

Preview Icon

• Install iconify-preview
• Config .vscode/settings.json read file json icon which generate after run script

{
  "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