直接从 Iconfont 复制 React 组件代码的秘密

2024-01-03 11:48:05

简介

作为一名 React 开发人员，我经常会从 Iconfont 上获取图标，但每次都需要手动将图标转换为 React 组件，这让我感到非常不便。于是，我灵机一动，决定编写一个油猴脚本，让我可以直接在 Iconfont 上复制 React 组件代码。这将极大地提升我的工作效率。

实现原理

要实现这个功能，我们需要对 Iconfont 的页面进行一些修改。具体来说，我们需要在图标详情页添加一个按钮，点击后即可生成并复制 React 组件代码。以下是实现步骤：

获取图标信息： 首先，我们需要获取图标的名称、Unicode 和 SVG 代码。这些信息可以从 Iconfont 的页面中提取。
生成 React 组件代码： 根据获取到的图标信息，我们可以使用 JavaScript 代码生成 React 组件代码。代码生成器可以是自定义的，也可以使用第三方库。
创建复制按钮： 接下来，我们需要在图标详情页添加一个按钮。点击此按钮时，将触发复制 React 组件代码的操作。
注入脚本： 最后，我们需要将油猴脚本注入到 Iconfont 页面中。脚本负责监听按钮点击事件并执行上述步骤。

油猴脚本

// ==UserScript==
// @name         Iconfont React Component Code Copy
// @version      1.0
// @description  在 Iconfont 上直接复制 React component 代码
// @author       [你的名字]
// @match        https://www.iconfont.cn/details/*
// ==/UserScript==

(function() {
  'use strict';

  // 获取图标信息
  const iconName = document.querySelector('.icon-name').textContent;
  const unicode = document.querySelector('.unicode').textContent;
  const svgCode = document.querySelector('svg').outerHTML;

  // 生成 React 组件代码
  const componentCode = generateReactComponentCode(iconName, unicode, svgCode);

  // 创建复制按钮
  const copyButton = document.createElement('button');
  copyButton.textContent = '复制 React 组件代码';
  copyButton.style.marginLeft = '10px';
  copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(componentCode);
    alert('React 组件代码已复制到剪贴板！');
  });

  // 注入脚本
  document.querySelector('.icon-actions').appendChild(copyButton);
})();