React显示文件夹中SVG

2019-02-20 00:44:45来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

import React from 'react';
import _ from 'lodash';
import styles from './iconPicker.less';

const requireContext = require.context('annotation/draw/svgs/', false, /^\.\/.*\.svg$/);

export default class extends React.PureComponent {
  render() {
    return (
      <ul className={styles.ul}>
        {_.reduce(
          requireContext.keys(),
          (pre, cur) => [
            ...pre,
            <li id={cur} key={cur} className={styles.li}><embed type="image/svg+xml" width={18} height={18} src={requireContext(cur)} /></li>,
          ],
          []
        )}
      </ul>
    );
  }
}
.ul {
    list-style-type: none;
    border: 1px solid #dedede;
    padding: 0px;
    margin: 4px 0px 4px 0px;
    position: relative;
    display: flow-root;
    .li {
        float: left;
        border: 1px solid #fff;
        line-height: 12px;
        vertical-align: middle;
        margin: 2px;
        padding: 2px;
        &:hover {
            border: 1px solid rgb(3, 189, 202);
            box-shadow:0 0 1px rgb(9, 180, 223);
        }
    }
}


原文链接:https://www.cnblogs.com/shi2310/p/10393740.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Module build failed: Module failed because of a eslint warni

下一篇:js怎么把数字转化为字母(A,B.....AA,AB,..)