☰

IconfontR

在 Iconfont 可以直接复制 React component

// ==UserScript==
// @name         IconfontR
// @namespace    https://maqib.cn/
// @version      0.3
// @description  在 Iconfont 可以直接复制 React component
// @author       #前端公众号：JS酷
// @match        https://www.iconfont.cn/*
// @icon         https://img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico
// @grant        none
// @license MIT
// ==/UserScript==

;(function () {
var toast = (content,time) => {
  	return new Promise((resolve,reject) => {
        let elAlertMsg = document.querySelector("#fehelper_alertmsg");
        if (!elAlertMsg) {
            let elWrapper = document.createElement('div');
            elWrapper.innerHTML = '<div id="fehelper_alertmsg" style="position:fixed;top:100px;left:0;right:0;z-index:1000;display:flex">' +
                '<p style="background:#4caf50;display:inline-block;color:#fff;text-align:center;' +
                'padding:10px 10px;margin:0 auto;font-size:14px;border-radius:4px;">' + content + '</p></div>';
            elAlertMsg = elWrapper.childNodes[0];
            document.body.appendChild(elAlertMsg);
        } else {
            elAlertMsg.querySelector('p').innerHTML = content;
            elAlertMsg.style.display = 'flex';
        }

      	window.setTimeout(function () {
            elAlertMsg.style.display = 'none';
          	resolve && resolve();
        }, time || 1000);
    });
};  

  async function fetchsvgr(code) {
   return await fetch('https://api.react-svgr.com/api/svgr', {
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify({
        code: code,
        options: {
          icon: false,
          native: false,
          typescript: false,
          ref: false,
          memo: false,
          titleProp: false,
          expandProps: 'end',
          replaceAttrValues: {},
          svgProps: {},
          svgo: true,
          svgoConfig: {
            plugins: [
              {
                name: 'preset-default',
                params: {
                  overrides: {
                    removeTitle: false,
                  },
                },
              },
            ],
          },
          prettier: true,
          prettierConfig: {
            semi: false,
          },
        },
      }),
      method: 'POST',
      mode: 'cors',
      credentials: 'omit',
    }).then((res) => res.json())
  }

  // 处理样式
  const style = `.page-manage-project .project-iconlist .block-icon-list li.cover .icon-cover-unfreeze, .page-manage-project .project-iconlist .block-icon-list li:hover .icon-cover-unfreeze,
  .block-icon-list li:hover .icon-cover {
      display: grid!important;
    }
    .page-manage-project .project-iconlist .block-icon-list li .icon-cover {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    .block-icon-list li .icon-cover {
      grid-template-rows: repeat(2, minmax(0, 1fr));
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .block-icon-list li .icon-cover .cover-item{
        width:auto;
    }
    .page-manage-project .project-iconlist .block-icon-list li .icon-cover .cover-code{
        height: auto;
      line-height: 40px;
    }
    .block-icon-list li .icon-cover .cover-item-line {
      height: auto;
      line-height: 52.5px;
    }`


  const styleEl = document.createElement('style')
  styleEl.textContent = style
  document.head.appendChild(styleEl)

  function addCopybtn() {
    console.log([...document.querySelectorAll('.icon-cover')])
    ;[...document.querySelectorAll('.icon-cover')].forEach((item) => {
      const span = document.createElement('span')
      span.title='复制 React component'
      span.className = 'cover-item iconfont cover-item-line icon-fuzhidaima'

      span.onclick = async () => {
        const svg = `<svg width="128" height="128" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">${
          item.parentNode.querySelector('svg').innerHTML
        }</svg>`
        console.log('svg',svg)
        try {
          const res = await fetchsvgr(svg)

          navigator.clipboard.writeText(res.output)
          toast('复制成功！',2000)
          console.log('React component 复制成功！')
        } catch (error) {
          console.log('请求服务出错')
          toast('请求服务出错',2000)
        }
      }
      item.appendChild(span)
    })

  }
  window.onpopstate = function(event) {
    addCopybtn()
  };

    let href=window.location.href
  document.addEventListener('click',(e)=>{
      setTimeout(() => {
        if(window.location.href!==href){
            addCopybtn()
            href=window.location.href
          }
      }, 500);
  })


  setTimeout(() => {
    addCopybtn()

  }, 1000)

  // Your code here...
})()