Skip to content

hunghg255/csvgtocss

Repository files navigation

logo

A script converts svg file to icons

NPM Version NPM Downloads Minizip Contributors License

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"]
}

Demo

About

Buy Me A Coffee

Gia Hung – hung.hg