duuliy

分享一个icon管理方案

2024-3-3

loader分享

相信大家都用过svg, png等，各种使用方法优缺点不赘述了…

// 版本比较老了， 三年前的代码
"svg-sprite-loader": "^3.9.2",
"svgo": "^1.0.5",
"svgo-loader": "^2.2.0"


{
      test: /^((?!\.color).)*((?!\.color).)\.svg$/,
      include: [path.resolve(__dirname, './src/assets/icons')],
      use: [
        { loader: 'svg-sprite-loader' },
        {
          loader: 'svgo-loader',
          options: {
            plugins: [
              { removeTitle: true },
              { convertColors: { shorthex: true } },
              { convertPathData: true },
              { removeComments: true },
              { removeDesc: true },
              { removeUselessDefs: true },
              { removeEmptyAttrs: true },
              { removeHiddenElems: true },
              { removeEmptyText: true },
              { removeUselessStrokeAndFill: true },
              { moveElemsAttrsToGroup: true },
              { removeStyleElement: true },
              { cleanupEnableBackground: true },
              { removeAttrs: { attrs: '(stroke|fill|filter)' } },
            ],
          },
        },
      ],
    },


const Icon = ({ name, size = 16, fill = '#5AD2FF', ...props }) => {
  return <svg width=&#123;size&#125; height=&#123;size&#125; fill=&#123;fill&#125; &#123;...props&#125;>
    <use xlinkHref=&#123;'#' + name&#125; />
  </svg>
  &#125;
统一管理

以上方法相信不少人也用过，那如果我要想像antd/icon一样使用呢（common）？
不少聪明同学说仿造antd/icon建一个private的npm来使用。

如果还要兼顾业务svg呢？每次业务开发都要上传到npm吗？如果高频敏捷开发呢？
那就不得不提到styled-components https://github.com/styled-components/styled-components

styled-components

业务svg流程：
1.verdaccio private的npm
2. 包


import styled from 'styled-components';
const SocialMediaWrapper = styled.div`
 ...
`

const Icon = (&#123; children, props &#125;) => &#123;
  return <SocialMediaWrapper &#123;...props&#125;>
    &#123;children&#125;
  </SocialMediaWrapper>
&#125;

3.common/svg 通过脚本（手动）生成components/svgIcon（内部使用npm包Icon）
取svg标签 之间的有效内容
4.引用components/svgIcon

问题：为什么不直接使用svg呢？
1.直接使用不方便改样式，或要使用svgloader，如果用svgloader又做不到2.
2.styled-components可以兼容公用和业务svg，做到统一。

tips:

关于image：包里的image发包时通过脚本上传到oss统一管理和使用。

styled-components https://medium.com/itsoktomakemistakes/react-create-react-app-svg-icons-styled-component-570b4e9f07b

verdaccio https://github.com/verdaccio/verdaccio