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源码和自己 ...
随机推荐
- 硅谷最有名的帮派:如果你不知道PayPal黑帮
paypal 你知道Tesla Motors,LinkedIn,SpaceX,Yelp,Yammer这几家公司的共同点吗?除了他们的市值都超过10亿美金之外,他们的创办人都是Paypal黑帮(Payp ...
- 路飞学城Python-Day19(practise)
# 特性1.继承:2.多态:3.封装 # 1.继承的用处:通过继承就可以解决类与类之间的代码冗余关系 # 2.多态的用处:1.增加了程序的灵活性,以不变应万变,使用者都是同一种形式去调用(func(a ...
- Vue组件之作用域插槽
写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...
- FZU 1692 Key problem( 循环矩阵优化 + 矩阵快速幂)
链接:传送门 题意: n个小朋友围成一个环( 2 <= n <= 100 )然后进行m次的游戏. 一开始,第 i 个小朋友有 Ai 个苹果. 定义游戏的规则为:每一次游戏处于 i 位置的小 ...
- [读书笔记] Python数据分析 (二) 引言
1. 数据分析的任务:数据读写,数据准备(清洗,修整,规范化,重塑,切片切块,变形),转换,建模计算,呈现(模型/数据) 2. 数据集: bit.ly的1.usa.gov数据:URL缩短服务bit ...
- debian 9 添加源
1.将下面内容的添加入/etc/apt/sources.list(香港镜像) #For software deb http://mirrors.ustc.edu.cn/debian/ stretch ...
- 一个学习scrapy的网站
当然是scrapy中文网辣,从浅到深,例子报错几乎都有 http://www.scrapyd.cn/doc/
- JavaScript 实现简单的 弹出框关闭框
JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...
- .conf、.bak是什么格式
1..conf 是config的简写,也就是配置文件,多用于存取硬件驱动程序的安装配置信息.内容一般是一些硬件的版本号呀,支持什么样的系统等信息.本质上来说就是TXT文件,里面的格式没有统一标准,各个 ...
- Maven系列--web.xml 配置详解
一 .web.xml介绍 启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 紧接着,容 ...