React显示文件夹中SVG
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的更多相关文章
- 使用.NET统计文件夹中文件总数
软件下载: http://hovertree.com/h/bjaf/hwqtjwjs.htm 截图: 使用方法:点击按钮,选择文件夹,就可以显示文件夹中包含的文件总数. 这个项目包含在HoverTre ...
- 如何在QFileSystemModel中显示文件夹的大小
在Qt里面,有一种Model/View框架,Model负责收集信息,View负责显示信息.QFileSystemModel可以读取文件大小,但是默认情况下不能读取文件夹大小. QFileSystemM ...
- webpack 打包出多个HTML文件,多个js文件,图片文件放置到指定文件夹中
一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...
- XP系统显示文件夹选项属性被删除解决注册表
Title:XP系统显示文件夹选项属性被删除解决注册表 -- 2010-11-18 13:17 昨天中了个毒窝,还有恶意软件,十分不爽. 开始恶意软件把显示所有文件夹给删除了,去找了个注册表,重新注册 ...
- webstorm打开后无法显示文件夹目录
最近接触webstorm,上午研究怎么删除项目,不小心把项目在目录中删除了,然后重新创建时,无法显示了. 状况类似这样的 百度上搜了一些没搜到,关键字是“webstorm 项目 目录 无法显示文件夹” ...
- React Native工程中TSLint静态检查工具的探索之路
建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...
- 【php】Apache无法自己主动跳转却显示文件夹与php无法连接mysql数据库的解决方式
一.Apache无法自己主动跳转却显示文件夹 Apache无法自己主动跳转却显示文件夹这是由于Apacheserver下conf/httpd.conf没有配置好,其默认是不跳转,直接显示文件夹 首先, ...
- React Native开发中自动打包脚本
React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...
- React和Vue中,是如何监听变量变化的
React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...
随机推荐
- Side effect (computer science)
In computer science, a function or expression is said to have a side effect if it modifies some stat ...
- Kattis -Backspace
Backspace Bjarki having trouble Shortly before the programming contest started, Bjarki decided to up ...
- C# 基础复习 三 XML操作
XML 可扩展标记语言(所有标签都是自己定义,没有固定格式) 如果要给XML规定格式,可以使用dtd (dtd是什么?你不会自己百度吗) XML主要用来存储数据 XML的要求: 根节点只能有一 ...
- hadoop中HDFS文件系统 nameNode出现的问题 nameNode无法打开
1,修改core-site.xml文件,先改成localhost,将所有进程关闭stop-all.sh(或者是先关闭所有进程,然后再修改文件),然后重启,在修改core-site.xml文件成ip地址 ...
- Swoole 源码分析——进程管理 Swoole_Process
前言 swoole-1.7.2 增加了一个进程管理模块,用来替代 PHP 的 pcntl 扩展. PHP自带的pcntl,存在很多不足,如 pcntl 没有提供进程间通信的功能 pcntl 不支持重定 ...
- jquery中的jsonp跨域调用(接口)
jquery jsonp跨域调用接口
- java实例化对象的五种方法
1.用new语句创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); 3.运用反射手段,调用java.lang.Cla ...
- Linux文件查找命令具体解释-which whereis find locate
原创BLog.转载请注明出处 http://blog.csdn.net/hello_hwc? viewmode=contents which命令 首先查看man which的说明 which - sh ...
- Android px,dp,pt,sp的差别
px(像素点) mm 等Android不建议用 为什么电脑web开发能够用而Android不建议用? 由于px代表像素点个数,一般电脑分辨率都同样 不管14寸还是15寸都是1366*768而手机分辨率 ...
- hdoj-1312-Red and Black
Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...