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. django前端到后端一次完整请求实例

    一.创建项目:# django-admin startproject mysite# cd mysite# python manage.py startapp blog 目录结构: 一.html文件: ...

  2. ZBrush中Mrgb、Rgb和M的使用

    ZBrush®软件工具架中所有的命令选项都是我们平时较为常用的,位于工具架的中间位置,有一个Mrgb.Rgb和M选项它们所表示的是材质及颜色,那么,在Zbrush中只要选择相应的选项,就可以同时绘制材 ...

  3. struts 中数据处理的3中方式

    方式一: 获取servletapi中的对象 方式二: struts中封装的对象 方式三: 实现接口 方式一和方式二的区别 方式一需要额外引入包或者是方式二实现不了的功能,比如:获取url 因为方式二只 ...

  4. C编译时`true' undeclared (first use in this function)

    在编译C语言时有时会遇到这样的错误提示: 'true' undeclared (first use in this function) or `false' undeclared (first use ...

  5. layui select change

    <select lay-filter="test"></select> layui.use([ 'form'], function() { var form ...

  6. Qt编程—去掉标题栏和设置窗口透明用法

    学习Qt编程,有时候我们很想做出好看又比较炫的画面,这时就常用到qt上的一些技巧. 这里我以一个小例子来展示qt的这些技巧,此qt编程写的,如图:(去掉标题栏和设置窗口透明后) 代码实现部分: .h文 ...

  7. Python数学实现二元一次方程

    import cmath import math import sys def get_float(msg,allow_zero): x = None while x is None: try: x ...

  8. python课堂知识的几点总结

    1.执行python脚本的两种方式:利用python进入解释器和找到可执行文件1.py 2.位和字节:一个字节是8位,计算机运行时是以字节为单位,存储的时候是以位为单位 3.编码发展:ASCII只有0 ...

  9. 紫书 习题7-13 UVa 817(dfs+栈求表达式的值)

    题目链接  点击打开链接 这道题分为两个部分, 一用搜索枚举每种可能, 二计算表达式的值, 有挺多细节需要注意 特别注意我的代码中在计算表达式的值中用到了一个!(代码枚举中的!表示不加符号, 我现在说 ...

  10. 1、koa的安装,get和post方法的基础使用

    koa是干什么:koa是用来解决回调嵌套的方案,减少异步回调,提高代码的可读性和可维护性同时也改进了错误处理( Express的错误处理相当糟糕) koa相比express的优点在哪里1.更加优雅简单 ...