@sanity/icons

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>
  );
}