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源码和自己 ...
随机推荐
- poj 2135 Farm Tour【 最小费用最大流 】
第一道费用流的题目--- 其实---还是不是很懂,只知道沿着最短路找增广路 建图 源点到1连一条容量为2(因为要来回),费用为0的边 n到汇点连一条容量为2,费用为0的边 另外的就是题目中输入的了 另 ...
- 第十一章 Python之异常处理
异常 异常时程序运行时发生错误的信号(在程序错误时,则会产生一个异常,若程序没有处理,则会抛出该异常,程序的运行也随之终止) 常见的异常类型AttributeError 试图访问一个对象没有的树形,比 ...
- svn: E155017: Checksum mismatch while updating 校验错误的解决方法
[10.3.53.53:/EMRCV5]# svn up svn: E155004: Working copy '/EMRCV5' locked. svn: E155004: '/EMRCV5' is ...
- CentOS 7编译安装Python3.7.X
在CentO S上通过编译安装Python3.7,添加python3软链,并使用python3. 环境 安装环境如下: Windows 10 Pro VMWare Workstation 15 Pro ...
- 【BZOJ5020】[LOJ2289]【THUWC2017】在美妙的数学王国中畅游 - LCT+泰勒展开
咕咕咕?咕咕咕! 题意: Description 数字和数学规律主宰着这个世界. 机器的运转, 生命的消长, 宇宙的进程, 这些神秘而又美妙的过程无不可以用数学的语言展现出来. 这印证了一句古老的名言 ...
- c 最简单的链表
#include <stdio.h> struct node { int data; struct node *next; //指向本身的指针 }; // main() { struct ...
- webpack实现模块化打包
webpack打包应用和实现 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 webpack.config.js 3 ...
- Remove Duplicates from Sorted List II 解答(有个比較特殊的case leetcode OJ没有覆盖)
昨天被考了一道数据结构题,当时的实现比較一般.回来翻看leetcode,果然是上面的题.遂解之. accept之后翻看discuss别人的解法.发现非常多能够accept的代码都过不了我设计的一个ca ...
- PyQt: LineEdit的智能输入提示
使用的的类是QtGui.QCompleter from PyQt4 import QtGui,QtCore str = QtCore.QStringList(['a','air','airbus']) ...
- 安卓APP载入HTML5页面解决方式总结
因为H5页面在移动端的兼容性及扩展性方面体现出来的优势,又兼得APP中植入H5页面相应用的灵活性有大大的提升(如活动.游戏的更新等).APP开发不可避免的须要载入一些H5页面.但安卓client对网页 ...