React 图片转svg应用

原创已于 2023-11-16 13:46:45 修改 · 357 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

svg

当前文章被收录于：

svg

1 篇文章 0 人学习

SVG

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2023-11-16 13:45:49 首次发布

本文展示了如何在React项目中导入并使用antd-design库中的Icon组件，通过SVG实现自定义的第一级目录图标。

案例利用antd-icon

import React from 'react';
import Icon from '@ant-design/icons';
const FirstCatalogImg = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.0"
    width="1em"  //1em可以通过样式更改大小
    height="1em"
    viewBox="0 0 96.000000 96.000000"  
    //viewBox="x, y, width, height"  // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
    preserveAspectRatio="xMidYMid meet"
  >
    <g
      transform="translate(0.000000,96.000000) scale(0.100000,-0.100000)"
      fill="currentColor" //currentColor可以通过样式更改颜色
      stroke="none"
    ></g>
  </svg>
);

const FirstCatalogIcon = (props) => <Icon component={FirstCatalogImg} {...props} />;
export { FirstCatalogIcon };