### Install and Use Sidekick Icons with React

Source: https://context7.com/ndri/sidekickicons/llms.txt

Demonstrates how to install the @sidekickicons/react package using npm and provides a TypeScript example of using icons within a React application. It includes type-safe component creation and usage.

```bash
npm list @sidekickicons/react
```

```json
// package.json after installation
{
  "dependencies": {
    "@sidekickicons/react": "^0.14.0",
    "react": "^18.2.0"
  }
}
```

```typescript
// TypeScript usage with full type safety
import type { FC, SVGProps } from 'react'
import { CrownIcon, FloppyDiskIcon } from '@sidekickicons/react/24/solid'

interface IconButtonProps {
  icon: FC<SVGProps<SVGSVGElement>>
  onClick: () => void
  label: string
}

const IconButton: FC<IconButtonProps> = ({ icon: Icon, onClick, label }) => {
  return (
    <button onClick={onClick} aria-label={label}>
      <Icon className="size-6" />
    </button>
  )
}

// Usage
function App() {
  return (
    <>
      <IconButton icon={CrownIcon} onClick={() => {}} label="Premium" />
      <IconButton icon={FloppyDiskIcon} onClick={() => {}} label="Save" />
    </>
  )
}
```

--------------------------------

### Install @sidekickicons/react

Source: https://github.com/ndri/sidekickicons/blob/master/react/README.md

Installs the Sidekick Icons React library using npm. This is the first step to using the icons in a React project.

```sh
npm install @sidekickicons/react
```

--------------------------------

### Svelte Icon Component Usage

Source: https://github.com/ndri/sidekickicons/blob/master/README.md

Incorporate Sidekickicons into Svelte applications by installing `@sidekickicons/svelte`. Icons are imported as Svelte components and accept a `class` prop for styling, which includes default size classes.

```bash
pnpm install @sidekickicons/svelte
```

```svelte
<script lang="ts">
  import { CrownIcon, BeakerIcon } from '@sidekickicons/svelte/24/solid'
</script>

<div>
  <CrownIcon class="text-blue-500" />
  <BeakerIcon class="text-green-500" />
</div>
```

--------------------------------

### Install @sidekickicons/vue via npm

Source: https://github.com/ndri/sidekickicons/blob/master/vue/README.md

This command installs the Vue package for Sidekick Icons using npm. Ensure you have Node.js and npm installed. This is the first step before using the icons in your Vue project.

```sh
npm install @sidekickicons/vue
```

--------------------------------

### NPM Package Installation Instructions

Source: https://context7.com/ndri/sidekickicons/llms.txt

Install sidekickicons packages for React, Vue, and Svelte projects using NPM, Yarn, or pnpm. These packages offer optimized icon sets with TypeScript support and tree-shaking capabilities.

```bash
# React project
npm install @sidekickicons/react
# or
yarn add @sidekickicons/react
# or
pnpm add @sidekickicons/react

# Vue project
npm install @sidekickicons/vue

# Svelte project
pnpm install @sidekickicons/svelte
```

--------------------------------

### Rails Icon Integration

Source: https://github.com/ndri/sidekickicons/blob/master/README.md

Add Sidekickicons to Rails applications using the `rails_icons` gem. This involves adding the gem to your Gemfile, running generators to install icons, and then using the `icon` helper method with library and variant options.

```bash
bundle add rails_icons
```

```bash
rails generate rails_icons:install --libraries=heroicons
rails generate rails_icons:install --libraries=sidekickicons
```

```ruby
# Heroicons beaker icon, outline 24px
icon "beaker"
# Heroicons beaker icon, solid 24px
icon "beaker", variant: "solid"
# Sidekickicons crown icon, outline 24px
icon "crown", library: "sidekickicons"
# Sidekickicons crown icon, mini 20px
icon "crown", library: "sidekickicons", variant: "mini"
```

--------------------------------

### React Icon Component Usage

Source: https://github.com/ndri/sidekickicons/blob/master/README.md

Integrate Sidekickicons into React applications by installing the `@sidekickicons/react` package. Icons are imported as individual React components and can be styled using className props, compatible with Tailwind CSS.

```sh
npm install @sidekickicons/react
```

```javascript
import { CrownIcon } from '@sidekickicons/react/24/solid'
import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <CrownIcon className="size-6 text-blue-500" />
      <BeakerIcon className="size-6 text-green-500" />
    </div>
  )
}
```

--------------------------------

### Icon Naming Convention and Mapping (JavaScript)

Source: https://context7.com/ndri/sidekickicons/llms.txt

Explains the naming convention for SVG files and how they are converted into PascalCase React and Vue component names with an 'Icon' suffix. Includes a JavaScript function demonstrating this conversion and usage examples with import statements.

```javascript
// File to component name mapping
'floppy-disk.svg'           → FloppyDiskIcon
'microphone-slash.svg'      → MicrophoneSlashIcon
'arrow-path-clock.svg'      → ArrowPathClockIcon
'chevron-down-up.svg'       → ChevronDownUpIcon
'computer-laptop.svg'       → ComputerLaptopIcon
'quotation-mark.svg'        → QuotationMarkIcon

// Implementation in build.js
const camelcase = require('camelcase')

function getComponentName(filename) {
  return `${camelcase(filename.replace(/\.svg$/, ''), {
    pascalCase: true,
  })}Icon`
}

// Usage examples
import { FloppyDiskIcon } from '@sidekickicons/react/24/solid'
import { MicrophoneSlashIcon } from '@sidekickicons/vue/24/outline'
import { ArrowPathClockIcon } from '@sidekickicons/react/20/solid'

// Browse all available icons
// https://unpkg.com/browse/@sidekickicons/react/24/outline/
// https://unpkg.com/browse/@sidekickicons/vue/24/solid/

```

--------------------------------

### Vue Icon Component Usage

Source: https://github.com/ndri/sidekickicons/blob/master/README.md

Use Sidekickicons in Vue projects by installing the `@sidekickicons/vue` package. Icons are imported as Vue components and can be styled using the class attribute, integrating seamlessly with Tailwind CSS.

```sh
npm install @sidekickicons/vue
```

```vue
<template>
  <div>
    <CrownIcon class="size-6 text-blue-500" />
    <BeakerIcon class="size-6 text-green-500" />
  </div>
</template>

<script setup>
import { CrownIcon } from '@sidekickicons/vue/24/solid'
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

--------------------------------

### Inline SVG Usage

Source: https://github.com/ndri/sidekickicons/blob/master/README.md

Directly embed SVG code into your HTML for Sidekickicons. This method is framework-agnostic and requires manual styling for size and color if not using a CSS framework like Tailwind.

```html
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="currentColor"
  aria-hidden="true"
  data-slot="icon"
  class="size-6 text-gray-500"
>
  <path
    d="M12 5a.75.75 0 0 0-.643.363L8.145 10.7 3.408 7.621a.75.75 0 0 0-1.15.74l1.5 10A.75.75 0 0 0 4.5 19h15a.75.75 0 0 0 .742-.639l1.5-10a.75.75 0 0 0-1.15-.74L15.855 10.7l-3.212-5.336A.75.75 0 0 0 12 5Z"
  />
</svg>
```

--------------------------------

### Build Workflow and Output Structure (Bash)

Source: https://context7.com/ndri/sidekickicons/llms.txt

Provides bash commands for running the build process, including full builds and individual steps for different icon styles and frameworks. It also illustrates the expected output directory structure after the build process.

```bash
# Build workflow
npm run build

# Individual build steps
npm run build-24-outline  # Optimize and copy 24x24 outline SVGs
npm run build-24-solid    # Optimize and copy 24x24 solid SVGs
npm run build-20-solid    # Optimize and copy 20x20 solid SVGs
npm run build-16-solid    # Optimize and copy 16x16 solid SVGs
npm run build-react       # Generate React components
npm run build-vue         # Generate Vue components

# Output structure
react/
├── 24/outline/
│   ├── CrownIcon.js
│   ├── CrownIcon.d.ts
│   ├── esm/
│   │   └── CrownIcon.js
│   └── index.js
├── 24/solid/
├── 20/solid/
└── 16/solid/

```

--------------------------------

### Build System for Icon Component Generation (JavaScript)

Source: https://context7.com/ndri/sidekickicons/llms.txt

Details the core build script (`scripts/build.js`) for generating optimized icon components for React and Vue. It explains functions for building icons for specific packages and styles, transforming SVGs using SVGR and Babel, and handling different module formats (CJS/ESM).

```javascript
// scripts/build.js - Core build function
const fs = require('fs').promises
const camelcase = require('camelcase')
const svgr = require('@svgr/core').default
const { compile: compileVue } = require('@vue/compiler-dom')

// Build icons for specific package and style
async function buildIcons(package, style, format) {
  // package: 'react' or 'vue'
  // style: '16/solid', '20/solid', '24/outline', '24/solid'
  // format: 'cjs' or 'esm'

  const outDir = `./${package}/${style}${format === 'esm' ? '/esm' : ''}`
  const icons = await getIcons(style)

  await Promise.all(
    icons.map(async ({ componentName, svg }) => {
      const content = await transform[package](svg, componentName, format)
      await ensureWrite(`${outDir}/${componentName}.js`, content)
    })
  )
}

// Transform SVG to React component
async function transformReact(svg, componentName, format) {
  let component = await svgr(svg, { ref: true, titleProp: true }, { componentName })
  let { code } = await babel.transformAsync(component, {
    plugins: [[require('@babel/plugin-transform-react-jsx'), { useBuiltIns: true }]],
  })

  code = code.replace('React.forwardRef(', '/*#__PURE__*/ React.forwardRef(')

  if (format === 'esm') {
    return code
  }

  return code
    .replace('import * as React from "react"', 'const React = require("react")')
    .replace('export default', 'module.exports =')
}

// Build all packages
// npm run build
// - Optimizes SVGs with SVGO
// - Generates React components (CJS + ESM)
// - Generates Vue components (CJS + ESM)
// - Creates TypeScript definitions
// - Generates package.json for each style

```

--------------------------------

### Svelte Component Icon Import

Source: https://context7.com/ndri/sidekickicons/llms.txt

Import and utilize icons as Svelte components for seamless integration into Svelte applications. This method supports various icon sizes and variants, automatically including necessary CSS classes for sizing.

```svelte
<script lang="ts">
  import {
    CrownIcon,
    FloppyDiskIcon,
    RobotIcon,
    MicrophoneSlashIcon
  } from '@sidekickicons/svelte/24/solid'
  import {
    MaskIcon,
    PinIcon
  } from '@sidekickicons/svelte/24/outline'

  let isSaving = false
  let isMuted = true

  async function handleSave() {
    isSaving = true
    try {
      await saveData()
      console.log('Saved successfully')
    } finally {
      isSaving = false
    }
  }

  function toggleMute() {
    isMuted = !isMuted
  }
</script>

<div class="toolbar">
  <CrownIcon class="text-yellow-500" />

  <button on:click={handleSave} disabled={isSaving}>
    <FloppyDiskIcon class={isSaving ? "text-gray-400 animate-pulse" : "text-blue-500"} />
    {isSaving ? 'Saving...' : 'Save'}
  </button>

  <RobotIcon class="text-green-600" />

  <button on:click={toggleMute}>
    <MicrophoneSlashIcon class={isMuted ? "text-red-500" : "text-gray-400"} />
  </button>

  <MaskIcon class="text-purple-500" />
  <PinIcon class="text-gray-700" />
</div>

<style>
  .toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
</style>
```

--------------------------------

### Import React Icons

Source: https://context7.com/ndri/sidekickicons/llms.txt

Import individual icon components from the React package for use in your application. Supports automatic tree-shaking and TypeScript definitions. Icons can be customized with standard CSS classes.

```javascript
import { CrownIcon, FloppyDiskIcon, RobotIcon } from '@sidekickicons/react/24/solid'
import { MaskIcon, PinIcon } from '@sidekickicons/react/24/outline'
import { CookieIcon } from '@sidekickicons/react/20/solid'
import { HeadphonesIcon } from '@sidekickicons/react/16/solid'

function MyApp() {
  return (
    <div className="flex gap-4 items-center">
      {/* 24x24 solid icons */}
      <CrownIcon className="size-6 text-yellow-500" />
      <FloppyDiskIcon className="size-6 text-blue-500" onClick={handleSave} />
      <RobotIcon className="size-6 text-gray-700" aria-label="AI Assistant" />

      {/* 24x24 outline icons */}
      <MaskIcon className="size-6 text-purple-600" />
      <PinIcon className="size-6 text-red-500" />

      {/* 20x20 mini icons */}
      <CookieIcon className="size-5 text-amber-600" />

      {/* 16x16 micro icons */}
      <HeadphonesIcon className="size-4 text-green-500" />
    </div>
  )
}
```

--------------------------------

### Use Sidekick Icons in React

Source: https://github.com/ndri/sidekickicons/blob/master/react/README.md

Demonstrates how to import and use Sidekick Icons alongside Heroicons within a React component. Icons are imported as individual React components and can be styled using standard CSS classes.

```javascript
import { CrownIcon } from '@sidekickicons/react/24/solid'
import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <CrownIcon className="size-6 text-blue-500" />
      <BeakerIcon className="size-6 text-green-500" />
    </div>
  )
}
```

--------------------------------

### Basic Vue Component Usage with Sidekick Icons

Source: https://github.com/ndri/sidekickicons/blob/master/vue/README.md

Demonstrates how to import and use Sidekick Icons as Vue components within a template. It shows importing both Sidekick Icons and Heroicons, applying Tailwind CSS classes for styling. Icons are imported from specific paths based on size and style.

```vue
<template>
  <div>
    <CrownIcon class="size-6 text-blue-500" />
    <BeakerIcon class="size-6 text-green-500" />
  </div>
</template>

<script setup>
import { CrownIcon } from '@sidekickicons/vue/24/solid'
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

--------------------------------

### Rails Integration with rails_icons Gem

Source: https://context7.com/ndri/sidekickicons/llms.txt

Integrate icons into Ruby on Rails applications using the rails_icons gem. This allows for easy inclusion of icons from various libraries (like heroicons and sidekickicons) directly in ERB views and helpers.

```ruby
# In your Gemfile
gem 'rails_icons'

# Terminal installation
# bundle add rails_icons
# rails generate rails_icons:install --libraries=heroicons
# rails generate rails_icons:install --libraries=sidekickicons

# app/views/dashboard/index.html.erb
<div class="dashboard-header">
  <!-- Heroicons (default library) -->
  <%= icon "beaker", class: "w-6 h-6 text-blue-500" %>
  <%= icon "beaker", variant: "solid", class: "w-6 h-6" %>

  <!-- Sidekickicons - must specify library -->
  <%= icon "crown", library: "sidekickicons", class: "w-6 h-6 text-yellow-500" %>
  <%= icon "floppy-disk", library: "sidekickicons", variant: "solid", class: "w-6 h-6" %>
  <%= icon "robot", library: "sidekickicons", variant: "mini", class: "w-5 h-5" %>
  <%= icon "cookie", library: "sidekickicons", variant: "micro", class: "w-4 h-4" %>
</div>

# app/helpers/application_helper.rb
module ApplicationHelper
  def status_icon(status)
    case status
    when 'active'
      icon "robot", library: "sidekickicons", variant: "solid", class: "w-5 h-5 text-green-500"
    when 'saving'
      icon "floppy-disk", library: "sidekickicons", class: "w-5 h-5 text-blue-500"
    when 'private'
      icon "mask", library: "sidekickicons", class: "w-5 h-5 text-purple-500"
    else
      icon "circle", library: "sidekickicons", class: "w-5 h-5 text-gray-400"
    end
  end
end

# Usage in view
<%= status_icon(@user.status) %>
```

--------------------------------

### Import Vue Icons

Source: https://context7.com/ndri/sidekickicons/llms.txt

Import Vue 3 functional components for use in your Vue applications. These components support full reactivity and allow for dynamic class binding. Event handlers can be attached using standard Vue directives.

```vue
<template>
  <div class="icon-toolbar">
    <CrownIcon class="size-6 text-yellow-500" />
    <FloppyDiskIcon
      class="size-6 text-blue-500 cursor-pointer hover:text-blue-700"
      @click="saveDocument"
    />
    <RobotIcon
      :class="['size-6', isAiActive ? 'text-green-500' : 'text-gray-400']"
    />
    <MicrophoneSlashIcon
      class="size-6 text-red-500"
      v-if="isMuted"
    />
    <QuotationMarkIcon class="size-5 text-indigo-600" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CrownIcon, FloppyDiskIcon, RobotIcon, MicrophoneSlashIcon } from '@sidekickicons/vue/24/solid'
import { QuotationMarkIcon } from '@sidekickicons/vue/20/solid'

const isAiActive = ref(false)
const isMuted = ref(true)

const saveDocument = () => {
  console.log('Saving document...')
}
</script>
```

--------------------------------

### Direct SVG Embedding in HTML

Source: https://context7.com/ndri/sidekickicons/llms.txt

Embed SVG icons directly into your HTML for maximum styling control. This method allows direct manipulation of icon attributes and CSS classes without external dependencies.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .icon {
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: middle;
    }
    .icon-save { color: #3b82f6; }
    .icon-privacy { color: #8b5cf6; }
    .icon-bot { color: #10b981; }
  </style>
</head>
<body>
  <!-- Save button with floppy disk icon -->
  <button onclick="save()">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="icon icon-save"
      aria-hidden="true"
    >
      <path d="M5.625 3.75a2.625 2.625 0 0 0-2.625 2.625v11.25c0 1.207.918 2.19 2.083 2.32l.542.06v-2.685a2.625 2.625 0 0 1 2.625-2.625h7.5a2.625 2.625 0 0 1 2.625 2.625v2.685l.542-.06a2.625 2.625 0 0 0 2.083-2.32V8.672a2.625 2.625 0 0 0-.768-1.856l-1.922-1.922a2.625 2.625 0 0 0-1.856-.769H5.625Z" />
      <path d="M9.75 17.97v-2.72a1.125 1.125 0 0 1 1.125-1.125h2.25A1.125 1.125 0 0 1 14.25 15.25v2.72l.347-.038A2.625 2.625 0 0 0 17.25 15.25v-3.188a.375.375 0 0 0-.11-.265l-3-3a.375.375 0 0 0-.265-.11H10.125a.375.375 0 0 0-.375.375v3.188a2.625 2.625 0 0 0 2.653 2.682l.347.038Z" />
    </svg>
    Save
  </button>

  <!-- Privacy indicator -->
  <div class="privacy-notice">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.5"
      class="icon icon-privacy"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 5.75L8.386 11.75 3 8.25 4.5 18.25h15L21 8.25l-5.386 3.5L12 5.75z" />
    </svg>
    Your data is protected
  </div>

  <script>
    function save() {
      alert('Document saved!');
    }
  </script>
</body>
</html>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.