zhongwei/gh-rafaelcalleja-claude-market-place-plugins-claudekit-skills

Fork 0

Files

Zhongwei Li 6ec3196ecc Initial commit

2025-11-30 08:48:52 +08:00

11 KiB

Raw Permalink Blame History

RemixIcon Integration Guide

Installation, usage, customization, and accessibility for RemixIcon library.

Overview

RemixIcon provides 3,100+ icons in outlined (-line) and filled (-fill) styles, built on 24x24px grid.

Icon naming: ri-{name}-{style}

Examples: ri-home-line, ri-heart-fill, ri-search-line

Installation

NPM Package

# npm
npm install remixicon

# yarn
yarn add remixicon

# pnpm
pnpm install remixicon

# bun
bun add remixicon

React Package

npm install @remixicon/react

Vue 3 Package

npm install @remixicon/vue

CDN

<link
  href="https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css"
  rel="stylesheet"
/>

Usage Methods

1. Webfont (HTML/CSS)

Import CSS and use class names:

// Next.js - app/layout.tsx
import 'remixicon/fonts/remixicon.css'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

// Use in components
<i className="ri-home-line"></i>
<i className="ri-search-fill"></i>

With sizing classes:

<i className="ri-home-line ri-2x"></i>    <!-- 2em -->
<i className="ri-search-line ri-lg"></i>  <!-- 1.33em -->
<i className="ri-heart-fill ri-xl"></i>   <!-- 1.5em -->

Available sizes:

ri-xxs (0.5em)
ri-xs (0.75em)
ri-sm (0.875em)
ri-1x (1em)
ri-lg (1.33em)
ri-xl (1.5em)
ri-2x through ri-10x
ri-fw (fixed width)

2. React Components

import { RiHomeLine, RiSearchFill, RiHeartLine } from "@remixicon/react"

export function MyComponent() {
  return (
    <div>
      <RiHomeLine size={24} />
      <RiSearchFill size={32} color="blue" />
      <RiHeartLine size="1.5em" className="icon" />
    </div>
  )
}

Props:

size - Number (pixels) or string (em, rem)
color - CSS color value
className - CSS class
Standard SVG props (onClick, style, etc.)

3. Vue 3 Components

<script setup lang="ts">
import { RiHomeLine, RiSearchFill } from "@remixicon/vue"
</script>

<template>
  <div>
    <RiHomeLine :size="24" />
    <RiSearchFill :size="32" color="blue" />
  </div>
</template>

4. Direct SVG

// Download SVG file and import
import HomeIcon from '@/icons/home-line.svg'

export function Component() {
  return <img src={HomeIcon} alt="Home" width={24} height={24} />
}

5. SVG Sprite

<svg className="icon">
  <use xlinkHref="path/to/remixicon.symbol.svg#ri-home-line"></use>
</svg>

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

Icon Categories

20 semantic categories with 3,100+ icons:

Navigation & UI:

Arrows (arrow-left, arrow-right, arrow-up-down)
System (settings, delete, add, close, more)
Editor (bold, italic, link, list, code)

Communication:

Communication (chat, phone, mail, message)
User (user, account, team, contacts)

Media & Content:

Media (play, pause, volume, camera, video)
Document (file, folder, article, draft)
Design (brush, palette, magic, crop)

Business & Commerce:

Business (briefcase, pie-chart, bar-chart)
Finance (money, wallet, bank-card, coin)
Map (map, pin, compass, navigation)

Objects & Places:

Buildings (home, bank, hospital, store)
Device (phone, laptop, tablet, printer)
Food (restaurant, cake, cup, knife)
Weather (sun, cloud, rain, moon)

Development & Logos:

Development (code, terminal, bug, git-branch)
Logos (github, twitter, facebook, google)

Health & Medical:

Health (heart-pulse, capsule, stethoscope)

Common Patterns

// Webfont approach
export function Navigation() {
  return (
    <nav>
      <a href="/home">
        <i className="ri-home-line"></i>
        <span>Home</span>
      </a>
      <a href="/search">
        <i className="ri-search-line"></i>
        <span>Search</span>
      </a>
      <a href="/profile">
        <i className="ri-user-line"></i>
        <span>Profile</span>
      </a>
    </nav>
  )
}

// React component approach
import { RiHomeLine, RiSearchLine, RiUserLine } from "@remixicon/react"

export function Navigation() {
  return (
    <nav>
      <a href="/home">
        <RiHomeLine size={20} />
        <span>Home</span>
      </a>
      <a href="/search">
        <RiSearchLine size={20} />
        <span>Search</span>
      </a>
      <a href="/profile">
        <RiUserLine size={20} />
        <span>Profile</span>
      </a>
    </nav>
  )
}

Button with Icon

import { RiDownloadLine } from "@remixicon/react"

export function DownloadButton() {
  return (
    <button className="btn-primary">
      <RiDownloadLine size={18} />
      <span>Download</span>
    </button>
  )
}

Status Indicators

import {
  RiCheckboxCircleFill,
  RiErrorWarningFill,
  RiAlertFill,
  RiInformationFill
} from "@remixicon/react"

type Status = 'success' | 'error' | 'warning' | 'info'

export function StatusIcon({ status }: { status: Status }) {
  const icons = {
    success: <RiCheckboxCircleFill color="green" size={20} />,
    error: <RiErrorWarningFill color="red" size={20} />,
    warning: <RiAlertFill color="orange" size={20} />,
    info: <RiInformationFill color="blue" size={20} />
  }

  return icons[status]
}

Input with Icon

import { RiSearchLine } from "@remixicon/react"

export function SearchInput() {
  return (
    <div className="input-group">
      <RiSearchLine size={20} className="input-icon" />
      <input type="text" placeholder="Search..." />
    </div>
  )
}

.input-group {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

input {
  padding-left: 40px;
}

Dynamic Icon Selection

import { RiHomeLine, RiHeartFill, RiStarLine } from "@remixicon/react"

const iconMap = {
  home: RiHomeLine,
  heart: RiHeartFill,
  star: RiStarLine,
}

export function DynamicIcon({ name, size = 24 }: { name: string; size?: number }) {
  const Icon = iconMap[name]
  return Icon ? <Icon size={size} /> : null
}

// Usage
<DynamicIcon name="home" size={24} />

Styling & Customization

Color

// Inherit from parent
<i className="ri-home-line" style={{ color: 'blue' }}></i>

// React component
<RiHomeLine color="blue" />
<RiHomeLine color="#ff0000" />
<RiHomeLine color="rgb(255, 0, 0)" />

Size

// CSS class
<i className="ri-home-line ri-2x"></i>

// Inline style
<i className="ri-home-line" style={{ fontSize: '32px' }}></i>

// React component
<RiHomeLine size={32} />
<RiHomeLine size="2em" />

Responsive Sizing

.icon {
  font-size: 24px;
}

@media (max-width: 768px) {
  .icon {
    font-size: 20px;
  }
}

Animations

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

<i className="ri-loader-4-line spin"></i>

Hover Effects

.icon-button {
  transition: color 0.2s;
}

.icon-button:hover {
  color: #007bff;
}

Accessibility

Provide Labels

Icon-only buttons:

<button aria-label="Search">
  <i className="ri-search-line"></i>
</button>

// Or with React
<button aria-label="Search">
  <RiSearchLine size={20} />
</button>

Decorative Icons

Hide from screen readers:

<span aria-hidden="true">
  <i className="ri-star-fill"></i>
</span>

// React
<span aria-hidden="true">
  <RiStarFill size={16} />
</span>

Icon with Text

<button>
  <RiDownloadLine size={18} aria-hidden="true" />
  <span>Download</span>
</button>

Text provides context, icon is decorative.

Framework Integration

Next.js

// app/layout.tsx
import 'remixicon/fonts/remixicon.css'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx
import { RiHomeLine } from "@remixicon/react"

export default function Page() {
  return <RiHomeLine size={24} />
}

Tailwind CSS

<i className="ri-home-line text-2xl text-blue-500"></i>

<RiHomeLine size={24} className="text-blue-500 hover:text-blue-600" />

CSS Modules

import styles from './component.module.css'
import 'remixicon/fonts/remixicon.css'

export function Component() {
  return <i className={`ri-home-line ${styles.icon}`}></i>
}

Performance Considerations

Webfont (Recommended for Multiple Icons)

Pros:

Single HTTP request
All icons available
Easy to use

Cons:

179KB WOFF2 file
Loads all icons even if unused

Best for: Apps using 10+ different icons

Individual SVG (Recommended for Few Icons)

Pros:

Only load what you need
Smallest bundle size
Tree-shakeable with React package

Cons:

Multiple imports

Best for: Apps using 1-5 icons

React/Vue Package

Pros:

Tree-shakeable (only imports used icons)
TypeScript support
Component API

Cons:

Slightly larger than raw SVG
Requires React/Vue

Best for: React/Vue apps with TypeScript

Troubleshooting

Icons Not Displaying

Check CSS import:

import 'remixicon/fonts/remixicon.css'

Verify class name:

<!-- Correct -->
<i className="ri-home-line"></i>

<!-- Incorrect -->
<i className="ri-home"></i>
<i className="home-line"></i>

Check font loading:

/* Ensure font-family is applied */
[class^="ri-"], [class*=" ri-"] {
  font-family: "remixicon" !important;
}

Icons Look Blurry

Use multiples of 24px for crisp rendering:

// Good
<RiHomeLine size={24} />
<RiHomeLine size={48} />

// Bad (breaks pixel grid)
<RiHomeLine size={20} />
<RiHomeLine size={30} />

Wrong Icon Size

Set parent font-size:

.icon-container {
  font-size: 24px;
}

Or use size prop:

<RiHomeLine size={24} />

Best Practices

Choose style consistently - Use line or fill throughout app
Maintain 24px grid - Use sizes: 24, 48, 72, 96px
Provide accessibility - Add aria-labels to icon-only buttons
Use currentColor - Icons inherit text color by default
Optimize bundle - Use React package for tree-shaking
Cache webfonts - CDN or long cache headers
Lazy load icons - Dynamic import for heavy icon sets
Test on devices - Ensure icons scale properly
Document usage - Create icon component library
Version lock - Pin RemixIcon version for consistency

Resources

Website: https://remixicon.com
GitHub: https://github.com/Remix-Design/RemixIcon
React Package: @remixicon/react
Vue Package: @remixicon/vue
License: Apache 2.0
Total Icons: 3,100+
Current Version: 4.7.0

11 KiB Raw Permalink Blame History

RemixIcon Integration Guide

Overview

Installation

NPM Package

React Package

Vue 3 Package

CDN

Usage Methods

1. Webfont (HTML/CSS)

2. React Components

3. Vue 3 Components

4. Direct SVG

5. SVG Sprite

Icon Categories

Common Patterns

Navigation Menu

Button with Icon

Status Indicators

Input with Icon

Dynamic Icon Selection

Styling & Customization

Color

Size

Responsive Sizing

Animations

Hover Effects

Accessibility

Provide Labels

Decorative Icons

Icon with Text

Framework Integration

Next.js

Tailwind CSS

CSS Modules

Performance Considerations

Webfont (Recommended for Multiple Icons)

Individual SVG (Recommended for Few Icons)

React/Vue Package

Troubleshooting

Icons Not Displaying

Icons Look Blurry

Wrong Icon Size

Best Practices

Resources

11 KiB

Raw Permalink Blame History