What is @sanity/icons?
@sanity/icons is an npm package that provides a collection of SVG icons designed for use with the Sanity.io content platform. These icons can be easily integrated into React applications to enhance the user interface with visually appealing and consistent iconography.
What are @sanity/icons's main functionalities?
Importing Icons
You can import specific icons from the @sanity/icons package to use in your React components. This allows you to include only the icons you need, optimizing your application's performance.
import { AddIcon, EditIcon, TrashIcon } from '@sanity/icons';
Using Icons in Components
Icons can be used directly within your React components. This example demonstrates how to use the AddIcon within a button component to create a visually appealing 'Add Item' button.
import { AddIcon } from '@sanity/icons';
function AddButton() {
return (
<button>
<AddIcon /> Add Item
</button>
);
}
Styling Icons
Icons can be styled using standard CSS properties. This example shows how to style the EditIcon with a margin and how to style the button containing the icon.
import { EditIcon } from '@sanity/icons';
function EditButton() {
return (
<button style={{ color: 'blue', fontSize: '24px' }}>
<EditIcon style={{ marginRight: '8px' }} /> Edit
</button>
);
}
Other packages similar to @sanity/icons
react-icons
react-icons is a popular package that provides a wide variety of icons from different icon libraries such as Font Awesome, Material Design, and more. It offers a larger selection of icons compared to @sanity/icons and is highly customizable.
fontawesome
fontawesome is a widely-used icon library that offers a vast collection of icons. It provides both free and premium icons and can be used in various frameworks and libraries, including React. It is more versatile and has a larger icon set compared to @sanity/icons.
@sanity/icons
The Sanity icons.
npm install @sanity/icons
npm install react
![npm version](https://img.shields.io/npm/v/@sanity/icons.svg?style=flat-square)
Usage
import {RocketIcon} from '@sanity/icons'
function App () {
return <RocketIcon style={{fontSize: 72}}>
}
License
MIT-licensed. See LICENSE.