cr-icon
v1.5.0
Published
cr-icon
Downloads
7
Maintainers
Readme
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@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