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/iconspath. You are free to use them for project related purposes. -
CrayonsSVG Icons are also available as an esm module. Supports Tree-Shaking. This is a useful feature especially for customization purposes. - Enables
@freshworks/crayons-iconCLI 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 ofdistfolder. 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