🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →

Book a Demo Install Sign in

@freshworks/crayons-icon

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@freshworks/crayons-icon

Freshworks `Crayons Icon` is an Icon library of SVGs. It also provides a NodeJS CLI to optimize SVGs.

latest

Source

npm

Version: 1.3.1

Version published: 4 years ago

Maintainers: 16

Created: 4 years ago

Source

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.

Click to see the List of Icon Assets available as part of Repo.

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@3/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.

Click to see the List of Sample CLI commands with Output.

Built with ❤ at Freshworks

Keywords

FAQs

What is @freshworks/crayons-icon?

Is @freshworks/crayons-icon well maintained?

Package last updated on 24 Mar 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install