Heroicons SVG 图标 2025 最新集成指南：React/Vue 框架一键安装教程

npm install @heroicons/react

import { UserIcon } from '@heroicons/react/24/outline';

function UserProfile() {
  return (
    <div className="flex items-center space-x-2">
      <UserIcon className="w-6 h-6 text-gray-500" />
      <p>欢迎来到用户中心</p>
    </div>
  );
}

npm install @heroicons/vue

import { createApp } from 'vue';
import { UserIcon } from '@heroicons/vue/24/outline';

const app = createApp({});
app.component('UserIcon', UserIcon);
app.mount('#app');

// React
<UserIcon className="text-blue-500" />

// Vue
<UserIcon class="text-blue-500" />

// React
<UserIcon className="w-8 h-8" />

// Vue
<UserIcon class="w-8 h-8" />

.heroicon {
  transition: transform 0.3s ease;
}

.heroicon:hover {
  transform: rotate(deg);
}

import { UserIcon } from '@heroicons/react/24/outline';

import * as Heroicons from '@heroicons/react';

const UserIcon = () => import('@heroicons/vue/24/outline').then(mod => mod.UserIcon);

<UserIcon className="w-6 h-6 md:w-8 md:h-8 lg:w-10 lg:h-10" />

// React
<UserIcon className="w-6 h-6 text-gray-500 hover:text-blue-500 focus:outline-none" />

// Vue
<UserIcon class="w-6 h-6 text-gray-500 hover:text-blue-500 focus:outline-none" />