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);
}
}
}

React显示文件夹中SVG的更多相关文章

  1. 使用.NET统计文件夹中文件总数

    软件下载: http://hovertree.com/h/bjaf/hwqtjwjs.htm 截图: 使用方法:点击按钮,选择文件夹,就可以显示文件夹中包含的文件总数. 这个项目包含在HoverTre ...

  2. 如何在QFileSystemModel中显示文件夹的大小

    在Qt里面,有一种Model/View框架,Model负责收集信息,View负责显示信息.QFileSystemModel可以读取文件大小,但是默认情况下不能读取文件夹大小. QFileSystemM ...

  3. webpack 打包出多个HTML文件,多个js文件,图片文件放置到指定文件夹中

    一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...

  4. XP系统显示文件夹选项属性被删除解决注册表

    Title:XP系统显示文件夹选项属性被删除解决注册表 -- 2010-11-18 13:17 昨天中了个毒窝,还有恶意软件,十分不爽. 开始恶意软件把显示所有文件夹给删除了,去找了个注册表,重新注册 ...

  5. webstorm打开后无法显示文件夹目录

    最近接触webstorm,上午研究怎么删除项目,不小心把项目在目录中删除了,然后重新创建时,无法显示了. 状况类似这样的 百度上搜了一些没搜到,关键字是“webstorm 项目 目录 无法显示文件夹” ...

  6. React Native工程中TSLint静态检查工具的探索之路

    建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...

  7. 【php】Apache无法自己主动跳转却显示文件夹与php无法连接mysql数据库的解决方式

    一.Apache无法自己主动跳转却显示文件夹 Apache无法自己主动跳转却显示文件夹这是由于Apacheserver下conf/httpd.conf没有配置好,其默认是不跳转,直接显示文件夹 首先, ...

  8. React Native开发中自动打包脚本

    React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...

  9. React和Vue中,是如何监听变量变化的

    React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...

随机推荐

  1. luogu P1354 房间最短路问题 计算几何_Floyd_线段交

    第一次写计算几何,还是很开心的吧(虽然题目好水qaq) 暴力枚举端点,暴力连边即可 用线段交判一下是否可行. Code: #include <cstdio> #include <al ...

  2. Java基础之Colloction

    0 引言 以下是介绍Java有关集合类,以及对应每个类的用途,同时进行比较集合类的不同特点来让我们深入了解. 1 Collction接口 Collection是最基本的集合接口,一个Collectio ...

  3. 机器学习实战笔记--AdaBoost(实例代码)

    #coding=utf-8 from numpy import * def loadSimpleData(): dataMat = matrix([[1. , 2.1], [2. , 1.1], [1 ...

  4. C语言基本语法——数组

    一.一维数组 1.什么是数组 2.数组语法 3.下标 4.初始化 5.数组名和数组首地址 二.一维数组的应用 1.数组的赋值与拷贝 2.数组的正反遍历 3.随机数 4.数组乱序 5.数组的重复 三.二 ...

  5. [置顶] 使用 maven 插件 maven-shade-plugin 对可执行 java 工程及其全部依赖 jar 进行打包

    作者:chenzhou123520 出处:http://chenzhou123520.iteye.com/blog/1706242 使用 maven 插件 maven-shade-plugin 对 j ...

  6. SparkSql初级编程实践

    1.Spark SQL 基本操作将下列 JSON 格式数据复制到 Linux 系统中,并保存命名为 employee.json.{ "id":1 , "name" ...

  7. python基础,函数,面向对象,模块练习

    ---恢复内容开始--- python基础,函数,面向对象,模块练习 1,简述python中基本数据类型中表示False的数据有哪些? #  [] {} () None 0 2,位和字节的关系? # ...

  8. Js原生实现抽奖功能

    <div>代码 按钮代码 JS原生代码  完整的代码: <div style="width:365px;height:300px;border:2px solid gree ...

  9. js常用特效——选项卡效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. ActiveMQ学习总结(4)——业界消息队列简介

    最近开发公司的短信平台,要用到消息队列,之前用的是亚马逊的SQS,考虑到后续业务发展,对消息推送的高并发要求,公司决定采用RabbitMQ来替换.借此机会开始熟悉各种MQ产品,下面先给大家简介下业界常 ...