build-icon.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. /**
  2. * Convert svg elements into React components
  3. */
  4. const { resolve } = require('path');
  5. const build = require('../../../scripts/build-svg');
  6. // Semi Icon
  7. const entryDir = resolve(__dirname, '../src/svgs');
  8. const outDir = resolve(__dirname, '../src/icons');
  9. const customTemplate = ({ template }, opts, { imports, interfaces, componentName, props, jsx, exports }) => {
  10. const plugins = ['jsx'];
  11. if (opts.typescript) {
  12. plugins.push('typescript');
  13. }
  14. const typeScriptTpl = template.smart({ plugins });
  15. return typeScriptTpl.ast`${imports}
  16. import { convertIcon } from '../components/Icon';
  17. ${interfaces}
  18. function ${componentName}(${props}) {
  19. return ${jsx};
  20. }
  21. const IconComponent = convertIcon(${componentName}, '${opts.iconType}');
  22. export default IconComponent;
  23. `;
  24. };
  25. const svgoPlugins = [
  26. // {
  27. // name: 'convertColors',
  28. // params: { currentColor: /^(?!url|none)./ },
  29. // },
  30. {
  31. name: 'convertPathData',
  32. params: {
  33. floatPrecision: 2
  34. }
  35. },
  36. {
  37. name: 'cleanupListOfValues',
  38. active: true,
  39. },
  40. {
  41. name: 'removeStyleElement',
  42. active: true,
  43. },
  44. {
  45. name: 'removeViewBox',
  46. active: false,
  47. },
  48. {
  49. name: 'removeDimensions',
  50. active: true,
  51. },
  52. ];
  53. // Semi icon library decolor
  54. build(entryDir, outDir, 'Icon', '', svgoPlugins, { typescript: true, icon: true, template: customTemplate });