React 修正Github等商标在lucide 图标库被弃用的问题

摘要

正在生成中……

如图，我在写react时发现，如果在lucide-react中引入它家的Github图标，会发现中间有一条删除线，并标记为弃用，也就是后面版本将移除该图标。

我查看了警告的详情，得到的原因是由于版权问题，Github等商标(brand)在lucide字体图标库中即将被移除，这个讨论在官方repo的反响很大，We're not accepting new Brand icons · Issue #670 · lucide-icons/lucide

很多认为这样不合理，因为很多登录界面使用了这些图标，一旦移除很不适应，大批应用被迫要去修改，还有一些人认为：lucide 只使用了个别的商标，如Github，并没有包含其他更多的商标，如果应用要支持多家网站的第三方登录，最好的方式还是使用支持一个更广泛厂商的图标库。比如这一家：

• github仓库：simple-icons/simple-icons: SVG icons for popular brands

• 官网：Simple Icons

它同时也是 lucide 这个 repo 推荐的商标图标。

我学习了一下，在react或者next.js使用 Simple Icons 的方法如下，并且我做了简单的封装，以兼容 lucide 的用法：

1. 安装

npm i simple-icons

2. 简单封装，可加入更多商标

// src/components/icons/brands.jsx
import React from 'react';
import { 
  siGithub, 
  siGoogle, 
  siFacebook, 
  siTwitter, 
  siYoutube, 
  siX,
  siXiaohongshu,
  siSinaweibo,
  siDouban
} from 'simple-icons';

const IconWrapper = ({ children, size = 24, title, className }) => (
  <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    fill="currentColor"
    className={className}
  >
    <title>{title}</title>
    {children}
  </svg>
);

export const Github = ({ size = 24, className }) => (
  <IconWrapper size={size} title="GitHub" className={className}>
    <path d={siGithub.path} />
  </IconWrapper>
);

export const Google = ({ size = 24, className }) => (
  <IconWrapper size={size} title="Google" className={className}>
    <path d={siGoogle.path} />
  </IconWrapper>
);

export const Facebook = ({ size = 24, className }) => (
  <IconWrapper size={size} title="Facebook" className={className}>
    <path d={siFacebook.path} />
  </IconWrapper>
);

export const Youtube = ({ size = 24, className }) => (
  <IconWrapper size={size} title="YouTube" className={className}>
    <path d={siYoutube.path} />
  </IconWrapper>
);

export const Twitter = ({ size = 24, className }) => (
  <IconWrapper size={size} title="Twitter" className={className}>
    <path d={siTwitter.path} />
  </IconWrapper>
);

export const X = ({ size = 24, className }) => (
  <IconWrapper size={size} title="X" className={className}>
    <path d={siX.path} />
  </IconWrapper>
);

export const Xiaohongshu = ({ size = 24, className }) => (
  <IconWrapper size={size} title="小红书" className={className}>
    <path d={siXiaohongshu.path} />
  </IconWrapper>
);

export const Weibo = ({ size = 24, className }) => (
  <IconWrapper size={size} title="新浪微博" className={className}>
    <path d={siSinaweibo.path} />
  </IconWrapper>
);

export const Douban = ({ size = 24, className }) => (
  <IconWrapper size={size} title="豆瓣" className={className}>
    <path d={siDouban.path} />
  </IconWrapper>
);

3. 在其他组件或页面中使用

import { Github } from './icons/brands';
// ....
<Link href="https://github.com/falconchen/cf-next-todo" className="text-sm text-gray-600 hover:underline flex items-center" target="_blank" rel="noopener noreferrer">
<Github size={16} className="w-4 h-4 mr-1" />
GitHub
</Link>

效果参考这个 Next Todo 应用的登录表单和页脚的 github 图标：