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 ofdist
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@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.
Built with