Cr-icon NPM | npm.io

Icon Library (@freshworks/crayons-icon)

Freshworks Crayons publishes @freshworks/crayons-icon as an Icon Library. Following features are made available to users via the Lib utils.

Optimized set of Crayons Icons in dist/icons path. You are free to use them for project related purposes.
Crayons SVG Icons are also available as an esm module. Supports Tree-Shaking. This is a useful feature especially for customization purposes.
Enables @freshworks/crayons-icon CLI Interface via which you can leverage the SVGO Tooling to optimize your project svg-icons.
Crayons Iconlib default svgo config (svg compression util) is available as part of dist folder. Refer usage docs on how to use it in your project.

Importing Icons from '@freshworks/crayons-icon'. Supports Tree-Shaking .

You can also import Crayons Icons as an esm Module.

HTML USAGE

<html>
<head>
   <script type="module" src="https://unpkg.com/@freshworks/crayons@canary/dist/crayons/crayons.esm.js" ></script>
   <script type="module">
        import { header, add_contact } from '@freshworks/crayons-icon';
   </script>
</head>   
<body>
      <div>
        <fw-icon data-svg={ header } label="Header" />
        <fw-icon data-svg={ add_contact } label="Add-Contact" />
      </div>
</body>
</html>

REACTJS USAGE

import React from 'react';
import { FwIcon } from '@freshworks/crayons/react'; 
import { header, add_contact } from '@freshworks/crayons-icon';

function App() {
    return ( 
        <div>
            <FwIcon dataSvg={ header } label="Header"/>
            <FwIcon dataSvg={ add_contact } label="Add-Contact"/>
        </div>
    );
}
export default App;

CLI Tool for processing SVGs

@freshworks/crayons-icon is also available as a CLI Tool for processing SVGs with a friendlier interface, options and easily customizable config to optimize your SVGs. See the usage below. It comes packed with a ultra tuned svgo-config. We support YML Config convention as its better in readability and easy to modify than a JSON. You may use the in-built CLI command to get the default YML File at your command root/ desired location, which you can further customize and use to optimze your SVGs via this CLI Tool.

Built with ❤ at Freshworks

crayons-icon icon lib Freshworks svgo svgo yml config svg JS Exports svg optimizer crayons-icon-cli

chalk cli-alerts cli-handle-error cli-handle-unhandled cli-meow-help cli-welcome fs fs-extra gulp js-yaml json-to-pretty-yaml meow svgo

@everything-registry/sub-chunk-1395 @zalastax/nolb-cr-

1.5.0

2 years ago