├── .editorconfig ├── .eslintignore ├── .githooks ├── deploy └── pre-commit ├── .gitignore ├── .npmignore ├── .nvmrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bin └── deploy.sh ├── examples ├── assets │ └── main.css ├── basic.js ├── favicon.ico ├── index.html └── main.css ├── lib ├── __snapshots__ │ └── index.test.js.snap ├── index.js └── index.test.js ├── package.json └── webpack ├── webpack.config.dev.js └── webpack.config.prod.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # Defines the coding style for different editors and IDEs. 2 | # http://editorconfig.org 3 | 4 | # top-most EditorConfig file 5 | root = true 6 | 7 | # Rules for source code. 8 | [*] 9 | charset = utf-8 10 | end_of_line = lf 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | indent_style = space 14 | indent_size = 4 15 | 16 | # Rules for tool configuration. 17 | [{package.json,*.yml, *.yaml}] 18 | indent_size = 2 19 | 20 | # Rules for markdown documents. 21 | [*.md] 22 | trim_trailing_whitespace = false 23 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.min.js 3 | coverage/ 4 | dist/ 5 | pages 6 | -------------------------------------------------------------------------------- /.githooks/deploy: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # https://gist.github.com/apexskier/efb7c1aaa6e77e8127a8 4 | # Deploy hooks stored in your git repo to everyone! 5 | # 6 | # I keep this in $ROOT/$HOOK_DIR/deploy 7 | # From the top level of your git repo, run ./hook/deploy (or equivalent) after 8 | # cloning or adding a new hook. 9 | # No output is good output. 10 | 11 | BASE=`git rev-parse --git-dir` 12 | ROOT=`git rev-parse --show-toplevel` 13 | HOOK_DIR=.githooks 14 | HOOKS=$ROOT/$HOOK_DIR/* 15 | 16 | if [ ! -d "$ROOT/$HOOK_DIR" ] 17 | then 18 | echo "Couldn't find hooks dir." 19 | exit 1 20 | fi 21 | 22 | # Clean up existing hooks. 23 | rm -f $BASE/hooks/* 24 | 25 | # Synlink new hooks. 26 | for HOOK in $HOOKS 27 | do 28 | (cd $BASE/hooks ; ln -s $HOOK `basename $HOOK` || echo "Failed to link $HOOK to `basename $HOOK`.") 29 | done 30 | 31 | echo "Hooks deployed to $BASE/hooks." 32 | exit 0 33 | -------------------------------------------------------------------------------- /.githooks/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # Check if this is the initial commit 4 | if git rev-parse --verify HEAD >/dev/null 2>&1 5 | then 6 | against=HEAD 7 | else 8 | against=4b825dc642cb6eb9a060e54bf8d69288fbee4904 9 | fi 10 | 11 | # Use git diff-index to check for whitespace errors 12 | if ! git diff-index --check --cached $against 13 | then 14 | echo "Aborting commit due to whitespace errors." 15 | exit 1 16 | else 17 | # Fail on first line that fails. 18 | set -e 19 | 20 | NEW_FILES=$(git --no-pager diff --name-only --cached --diff-filter=d) 21 | JS_FILES=$(echo "$NEW_FILES" | { grep .js$ || true; }) 22 | SNAPSHOT_FILES=$(echo "$NEW_FILES" | { grep .snap$ || true; }) 23 | 24 | if [ -n "$JS_FILES" ]; 25 | then 26 | npm run linter:js -s -- $JS_FILES 27 | fi 28 | 29 | if [ -n "$JS_FILES" ] || [ -n "$SNAPSHOT_FILES" ]; 30 | then 31 | npm run test:coverage -s 32 | fi 33 | 34 | exit 0 35 | fi 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | .DS_Store 6 | 7 | # Runtime data 8 | pids 9 | *.pid 10 | *.seed 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # nyc test coverage 19 | .nyc_output 20 | 21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 22 | .grunt 23 | 24 | # node-waf configuration 25 | .lock-wscript 26 | 27 | # Compiled binary addons (http://nodejs.org/api/addons.html) 28 | build/Release 29 | dist 30 | pages 31 | 32 | # Dependency directories 33 | node_modules 34 | jspm_packages 35 | 36 | # Optional npm cache directory 37 | .npm 38 | 39 | # Optional REPL history 40 | .node_repl_history 41 | 42 | .env 43 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | coverage 2 | server 3 | .babelrc 4 | examples 5 | docs 6 | lib 7 | .npmignore 8 | webpack 9 | .nvmrc 10 | .travis.yml 11 | .eslintignore 12 | .eslintrc 13 | .editorconfig 14 | .githooks 15 | .github 16 | bin 17 | .env 18 | pages 19 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 6 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | cache: 4 | directories: 5 | - node_modules 6 | node_js: 7 | - 6 8 | script: 9 | - npm run test:ci 10 | after_success: 11 | - npm run coveralls 12 | branches: 13 | except: 14 | - gh-pages 15 | notifications: 16 | email: false 17 | slack: 18 | rooms: 19 | secure: b1bt6GNVx5ELffGrFn+KiJ+1yZH58rULx+UE9hWhTZ4+R2+E5ASkDYAV7bDa8UN/4FMrsNSYCHioIIN+eGwB3sMDd/oW/aUQhxmVOM3586EpYMEtwnEmPYdmekX3KxyIzFoeB5uE9KZ0Bul/Pd5yOv4a7PzHLIf501gITyPLyKt85HG+yGle10w+UeSdsvbhkpJZSihV1xfS2eev19e7BQCAlRB1yLYymvYX9u9bCXsrguQyEO3S6LWTYggJfxRjdu6Jo31tRzT9q9Wy/qYAn2WuKR9Dt8k7J/wLFC5p66kzRY8xoononwaDjqTlzJ0yG6PvXdUCtfQrMJ89DegguYcAScK3b7Nlx5kcB57Qoh/OER8lpRsVwdFWnpffkAIAj5CsdBHpKBcVh90CRdEb+Q6JvbAnDDhE4cvhqtpsnU+iBKc/mmlhEsqi/k9hKerOlhRvzHXmrvDdPCQAAuY9phRzGG3lJ6ofZVdL8pivZS/A6kkj10BbWUEOJhWyxoNjgHqdBt7clyJf/duV0dD7umsk83J6I+IChZvZEXzsDEtmWWfVfQD9cWD/hWVnCHqnkC3Yp2DUxVQeim/yvU/69lgnxyWxl2r5GT9wPkm1Nsk8EJdnf/hYQUmuNA9WymxcA+czGAwXYwVeGP8U5kQ0PtrkGc8/syX1s6xFbsKjX2g= 20 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | This project adheres to [Semantic Versioning](http://semver.org/). 5 | 6 | ## Unreleased 7 | 8 | ## [[v4.0.1]](https://github.com/springload/react-svg-icon/releases/tag/v4.0.1) 9 | 10 | - Add peerDependencies compatibility for React 16. 11 | 12 | ## [[v4.0.0]](https://github.com/springload/react-svg-icon/releases/tag/v4.0.0) 13 | 14 | - No longer adding `i-` prefix in front of href references. 15 | 16 | ## [[v3.0.0]](https://github.com/springload/react-svg-icon/releases/tag/v3.0.0) 17 | 18 | ### Changed 19 | 20 | - Convert all code to be compatible with React 15.5. 21 | - Update peerDependencies to reflect dependency on `prop-types`. 22 | 23 | ## [[v2.0.0]](https://github.com/springload/react-svg-icon/releases/tag/v2.0.0) 24 | 25 | ### Changed 26 | 27 | - Tested with React 15.2 28 | - Now a stateless component (breaking change if there was a ref on it) 29 | 30 | ## [[v1.0.0]](https://github.com/springload/react-svg-icon/releases/tag/v1.0.0) 31 | 32 | First official stable release! 33 | 34 | ## [[v0.3.0]](https://github.com/springload/react-svg-icon/releases/tag/v0.3.0) 35 | 36 | ### Added 37 | 38 | - Support React 15 39 | 40 | ### Changed 41 | 42 | - Change package path to `dist` file 43 | 44 | ## [[v0.2.3]](https://github.com/springload/react-svg-icon/releases/tag/v0.2.3) 45 | 46 | ### Added 47 | 48 | - Proper index.html for gh-pages 49 | - Travis integration 50 | - Another example with multiple icons 51 | - CHANGELOG following [SemVer](http://semver.org) 52 | 53 | ### Changed 54 | 55 | - README include available commands 56 | 57 | ## [[0.1.0]](https://github.com/springload/react-svg-icon/releases/tag/v0.1.0) 58 | 59 | ### Added 60 | 61 | - Unit tests 62 | - One example 63 | - index.html to list example (gh-pages) 64 | 65 | ### Changed 66 | 67 | - React bumped to 0.14 68 | - rackt-cli bumped to 0.5.3 69 | - README link to demo page 70 | 71 | ## [[v0.0.6]](https://github.com/springload/react-svg-icon/releases/tag/v0.0.6) 72 | 73 | ### Changed 74 | 75 | - package path 76 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Springload 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [react-svg-icon](https://springload.github.io/react-svg-icon/) [![npm](https://img.shields.io/npm/v/react-svg-icon.svg?style=flat-square)](https://www.npmjs.com/package/react-svg-icon) [![Build Status](https://travis-ci.org/springload/react-svg-icon.svg?branch=master)](https://travis-ci.org/springload/react-svg-icon) [![Coverage Status](https://coveralls.io/repos/github/springload/react-svg-icon/badge.svg)](https://coveralls.io/github/springload/react-svg-icon) 2 | 3 | > Accessible SVG icon component for React. 4 | 5 | Check out the [online demo](https://springload.github.io/react-svg-icon/)! 6 | 7 | ## Usage 8 | 9 | ```sh 10 | npm install --save react-svg-icon 11 | ``` 12 | 13 | ```jsx 14 | import Icon from 'react-svg-icon'; 15 | 16 | 17 | 18 | // Optionally, use a title to add an accessible label 19 | 20 | ``` 21 | 22 | ### Inline SVG assets 23 | 24 | Create your SVG sprite and inline them at the start of you HTML document. There's a nice tutorial on how to do this on [CSS-Tricks](https://css-tricks.com/svg-sprites-use-better-icon-fonts/). 25 | 26 | ## Development 27 | 28 | ### Install 29 | 30 | 31 | > Clone the project on your computer, and install [Node](https://nodejs.org). This project also uses [nvm](https://github.com/creationix/nvm). 32 | 33 | ```sh 34 | nvm install 35 | # Then, install all project dependencies. 36 | npm install 37 | # Install the git hooks. 38 | ./.githooks/deploy 39 | ``` 40 | 41 | ### Working on the project 42 | 43 | > Everything mentioned in the installation process should already be done. 44 | 45 | ```sh 46 | # Make sure you use the right node version. 47 | nvm use 48 | # Start the server and the development tools. 49 | npm run start 50 | # Runs linting. 51 | npm run lint 52 | # Runs tests. 53 | npm run test 54 | # View other available commands with: 55 | npm run 56 | ``` 57 | 58 | ### Releases 59 | 60 | - Make a new branch for the release of the new version. 61 | - Update the [CHANGELOG](CHANGELOG.md). 62 | - Update the version number in `package.json`, following semver. 63 | - Make a PR and squash merge it. 64 | - Back on master with the PR merged, follow the instructions below. 65 | 66 | ```sh 67 | npm run dist 68 | # Use irish-pub to check the package content. Install w/ npm install -g first. 69 | irish-pub 70 | npm publish 71 | ``` 72 | 73 | - Finally, go to GitHub and create a release and a tag for the new version. 74 | - Done! 75 | -------------------------------------------------------------------------------- /bin/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | # 3 | # From the project's root. 4 | # First make sure your master is up to date. 5 | # Then push the new changes 6 | git checkout -B gh-pages 7 | git add -f pages 8 | git commit -am "Rebuild website" --no-verify 9 | git filter-branch -f --prune-empty --subdirectory-filter pages 10 | git push -f origin gh-pages 11 | git checkout - 12 | -------------------------------------------------------------------------------- /examples/assets/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f3f3f3; 3 | padding: 50px; 4 | font-size: 1rem; 5 | font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; 6 | color: #333; 7 | font-weight: normal; 8 | } 9 | 10 | h1, h2, h3, h4, h5, h6 { 11 | margin:0 0 1rem; 12 | } 13 | 14 | p, .public-DraftStyleDefault-block { 15 | margin:0 0 0.5rem; 16 | } 17 | 18 | li .public-DraftStyleDefault-block, 19 | code .public-DraftStyleDefault-block { 20 | margin-bottom: 0.25rem; 21 | } 22 | 23 | pre { 24 | margin: 0; 25 | } 26 | 27 | h1, h2, h3 { 28 | line-height:1.1; 29 | } 30 | 31 | h1 { 32 | font-size: 1.5rem; 33 | } 34 | 35 | h2 { 36 | color:#393939; 37 | } 38 | 39 | h3, h4, h5, h6 { 40 | color:#494949; 41 | } 42 | 43 | a { 44 | color:#39c; 45 | text-decoration:none; 46 | } 47 | 48 | a:hover { 49 | color:#069; 50 | } 51 | 52 | a small { 53 | font-size:11px; 54 | color:#777; 55 | margin-top:-0.3em; 56 | display:block; 57 | } 58 | 59 | a:hover small { 60 | color:#777; 61 | } 62 | 63 | .wrapper { 64 | width: 960px; 65 | margin:0 auto; 66 | } 67 | 68 | blockquote { 69 | border-left: 1px solid #e5e5e5; 70 | padding: 0 0 0 20px; 71 | margin-left: 0; 72 | font-style: italic; 73 | } 74 | 75 | code, pre { 76 | font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; 77 | color:#333; 78 | } 79 | 80 | pre { 81 | font-size:12px; 82 | padding:8px 15px; 83 | background: #f8f8f8; 84 | border-radius:5px; 85 | border:1px solid #e5e5e5; 86 | overflow-x: auto; 87 | } 88 | 89 | table { 90 | width:100%; 91 | border-collapse:collapse; 92 | } 93 | 94 | th, td { 95 | text-align:left; 96 | padding:5px 10px; 97 | border-bottom:1px solid #e5e5e5; 98 | } 99 | 100 | dt { 101 | color:#444; 102 | font-weight:700; 103 | } 104 | 105 | th { 106 | color:#444; 107 | } 108 | 109 | img { 110 | max-width:100%; 111 | } 112 | 113 | header { 114 | width:320px; 115 | float:left; 116 | position:fixed; 117 | -webkit-font-smoothing:subpixel-antialiased; 118 | } 119 | 120 | strong { 121 | color:#222; 122 | font-weight:700; 123 | } 124 | 125 | section { 126 | width:560px; 127 | float:right; 128 | padding-bottom:25px; 129 | background-color: #fff; 130 | padding: 0 2rem; 131 | } 132 | 133 | small { 134 | font-size:11px; 135 | } 136 | 137 | hr { 138 | border:0; 139 | background:#e5e5e5; 140 | height:1px; 141 | margin:0 0 20px; 142 | } 143 | 144 | footer { 145 | width:320px; 146 | float:left; 147 | position:fixed; 148 | bottom:50px; 149 | -webkit-font-smoothing:subpixel-antialiased; 150 | } 151 | 152 | @media print, screen and (max-width: 960px) { 153 | 154 | div.wrapper { 155 | width:auto; 156 | margin:0; 157 | } 158 | 159 | header, section, footer { 160 | float:none; 161 | position:static; 162 | width:auto; 163 | } 164 | 165 | header { 166 | padding-right:320px; 167 | } 168 | } 169 | 170 | @media print, screen and (max-width: 720px) { 171 | body { 172 | word-wrap:break-word; 173 | } 174 | 175 | header { 176 | padding:0; 177 | } 178 | 179 | pre, code { 180 | word-wrap:normal; 181 | } 182 | } 183 | 184 | @media print, screen and (max-width: 480px) { 185 | body { 186 | padding:15px; 187 | } 188 | } 189 | 190 | @media print { 191 | body { 192 | padding:0.4in; 193 | font-size:12pt; 194 | color:#444; 195 | } 196 | } 197 | 198 | 199 | /* 200 | Copyright 2014 GitHub Inc. 201 | 202 | Licensed under the Apache License, Version 2.0 (the "License"); 203 | you may not use this file except in compliance with the License. 204 | You may obtain a copy of the License at 205 | 206 | http://www.apache.org/licenses/LICENSE-2.0 207 | 208 | Unless required by applicable law or agreed to in writing, software 209 | distributed under the License is distributed on an "AS IS" BASIS, 210 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 211 | See the License for the specific language governing permissions and 212 | limitations under the License. 213 | 214 | */ 215 | 216 | .pl-c /* comment */ { 217 | color: #969896; 218 | } 219 | 220 | .pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */, 221 | .pl-s .pl-v /* string variable */ { 222 | color: #0086b3; 223 | } 224 | 225 | .pl-e /* entity */, 226 | .pl-en /* entity.name */ { 227 | color: #795da3; 228 | } 229 | 230 | .pl-s .pl-s1 /* string source */, 231 | .pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ { 232 | color: #333; 233 | } 234 | 235 | .pl-ent /* entity.name.tag */ { 236 | color: #63a35c; 237 | } 238 | 239 | .pl-k /* keyword, storage, storage.type */ { 240 | color: #a71d5d; 241 | } 242 | 243 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */, 244 | .pl-s /* string */, 245 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */, 246 | .pl-sr /* string.regexp */, 247 | .pl-sr .pl-cce /* string.regexp constant.character.escape */, 248 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */, 249 | .pl-sr .pl-sre /* string.regexp source.ruby.embedded */ { 250 | color: #183691; 251 | } 252 | 253 | .pl-v /* variable */ { 254 | color: #ed6a43; 255 | } 256 | 257 | .pl-id /* invalid.deprecated */ { 258 | color: #b52a1d; 259 | } 260 | 261 | .pl-ii /* invalid.illegal */ { 262 | background-color: #b52a1d; 263 | color: #f8f8f8; 264 | } 265 | 266 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ { 267 | color: #63a35c; 268 | font-weight: bold; 269 | } 270 | 271 | .pl-ml /* markup.list */ { 272 | color: #693a17; 273 | } 274 | 275 | .pl-mh /* markup.heading */, 276 | .pl-mh .pl-en /* markup.heading entity.name */, 277 | .pl-ms /* meta.separator */ { 278 | color: #1d3e81; 279 | font-weight: bold; 280 | } 281 | 282 | .pl-mq /* markup.quote */ { 283 | color: #008080; 284 | } 285 | 286 | .pl-mi /* markup.italic */ { 287 | color: #333; 288 | font-style: italic; 289 | } 290 | 291 | .pl-mb /* markup.bold */ { 292 | color: #333; 293 | font-weight: bold; 294 | } 295 | 296 | .pl-md /* markup.deleted, meta.diff.header.from-file */ { 297 | background-color: #ffecec; 298 | color: #bd2c00; 299 | } 300 | 301 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ { 302 | background-color: #eaffea; 303 | color: #55a532; 304 | } 305 | 306 | .pl-mdr /* meta.diff.range */ { 307 | color: #795da3; 308 | font-weight: bold; 309 | } 310 | 311 | .pl-mo /* meta.output */ { 312 | color: #1d3e81; 313 | } 314 | 315 | /* 316 | * Styles of the examples 317 | */ 318 | 319 | .example { 320 | padding: 2rem 0; 321 | } 322 | 323 | .i { 324 | width: 96px; 325 | height: 96px; 326 | } 327 | 328 | .i > use { 329 | fill: currentcolor; 330 | } 331 | 332 | .i--red { 333 | color: #cc0000; 334 | } 335 | -------------------------------------------------------------------------------- /examples/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Icon from '../lib/index'; 4 | 5 | const App = () => ( 6 |
7 | 8 | 9 | 10 |
11 | ); 12 | 13 | ReactDOM.render(, document.querySelector('[data-mount-basic]')); 14 | -------------------------------------------------------------------------------- /examples/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springload/react-svg-icon/f0ded0457140e5ca11310ba670ffbbb35b87869c/examples/favicon.ico -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | react-svg-icon – Springload 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |

react-svg-icon

 23 |

Accessible SVG icon component for React

24 | 25 |

26 | npm 27 | Build Status 28 |

29 |
30 | 31 |
32 |
33 |

Basic example

34 |
35 |
36 |
37 | 38 | 47 |
48 | 49 | 50 | 51 | 52 | 53 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /examples/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fff; 3 | padding:50px; 4 | font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 5 | color:#727272; 6 | font-weight:400; 7 | } 8 | 9 | h1, h2, h3, h4, h5, h6 { 10 | color:#222; 11 | margin:0 0 15px; 12 | } 13 | 14 | p, ul, ol, table, dl { 15 | margin:0 0 20px; 16 | } 17 | 18 | pre { 19 | margin: 0; 20 | } 21 | 22 | h1, h2, h3 { 23 | line-height:1.1; 24 | } 25 | 26 | h1 { 27 | font-size:22px; 28 | } 29 | 30 | h2 { 31 | color:#393939; 32 | } 33 | 34 | h3, h4, h5, h6 { 35 | color:#494949; 36 | } 37 | 38 | a { 39 | color:#39c; 40 | text-decoration:none; 41 | } 42 | 43 | a:hover { 44 | color:#069; 45 | } 46 | 47 | a small { 48 | font-size:11px; 49 | color:#777; 50 | margin-top:-0.3em; 51 | display:block; 52 | } 53 | 54 | a:hover small { 55 | color:#777; 56 | } 57 | 58 | .wrapper { 59 | width:860px; 60 | margin:0 auto; 61 | } 62 | 63 | blockquote { 64 | border-left:1px solid #e5e5e5; 65 | margin:0; 66 | padding:0 0 0 20px; 67 | font-style:italic; 68 | } 69 | 70 | code, pre { 71 | font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; 72 | color:#333; 73 | font-size:12px; 74 | } 75 | 76 | pre { 77 | padding:8px 15px; 78 | background: #f8f8f8; 79 | border-radius:5px; 80 | border:1px solid #e5e5e5; 81 | overflow-x: auto; 82 | } 83 | 84 | table { 85 | width:100%; 86 | border-collapse:collapse; 87 | } 88 | 89 | th, td { 90 | text-align:left; 91 | padding:5px 10px; 92 | border-bottom:1px solid #e5e5e5; 93 | } 94 | 95 | dt { 96 | color:#444; 97 | font-weight:700; 98 | } 99 | 100 | th { 101 | color:#444; 102 | } 103 | 104 | img { 105 | max-width:100%; 106 | } 107 | 108 | header { 109 | width:270px; 110 | float:left; 111 | position:fixed; 112 | -webkit-font-smoothing:subpixel-antialiased; 113 | } 114 | 115 | header ul { 116 | list-style:none; 117 | height:40px; 118 | padding:0; 119 | background: #f4f4f4; 120 | border-radius:5px; 121 | border:1px solid #e0e0e0; 122 | width:270px; 123 | } 124 | 125 | header li { 126 | width:89px; 127 | float:left; 128 | border-right:1px solid #e0e0e0; 129 | height:40px; 130 | } 131 | 132 | header li:first-child a { 133 | border-radius:5px 0 0 5px; 134 | } 135 | 136 | header li:last-child a { 137 | border-radius:0 5px 5px 0; 138 | } 139 | 140 | header ul a { 141 | line-height:1; 142 | font-size:11px; 143 | color:#999; 144 | display:block; 145 | text-align:center; 146 | padding-top:6px; 147 | height:34px; 148 | } 149 | 150 | header ul a:hover { 151 | color:#999; 152 | } 153 | 154 | header ul a:active { 155 | background-color:#f0f0f0; 156 | } 157 | 158 | strong { 159 | color:#222; 160 | font-weight:700; 161 | } 162 | 163 | header ul li + li + li { 164 | border-right:none; 165 | width:89px; 166 | } 167 | 168 | header ul a strong { 169 | font-size:14px; 170 | display:block; 171 | color:#222; 172 | } 173 | 174 | section { 175 | width:500px; 176 | float:right; 177 | padding-bottom:25px; 178 | } 179 | 180 | small { 181 | font-size:11px; 182 | } 183 | 184 | hr { 185 | border:0; 186 | background:#e5e5e5; 187 | height:1px; 188 | margin:0 0 20px; 189 | } 190 | 191 | footer { 192 | width:270px; 193 | float:left; 194 | position:fixed; 195 | bottom:50px; 196 | -webkit-font-smoothing:subpixel-antialiased; 197 | } 198 | 199 | @media print, screen and (max-width: 960px) { 200 | 201 | div.wrapper { 202 | width:auto; 203 | margin:0; 204 | } 205 | 206 | header, section, footer { 207 | float:none; 208 | position:static; 209 | width:auto; 210 | } 211 | 212 | header { 213 | padding-right:320px; 214 | } 215 | 216 | section { 217 | border:1px solid #e5e5e5; 218 | border-width:1px 0; 219 | padding:20px 0; 220 | margin:0 0 20px; 221 | } 222 | 223 | header a small { 224 | display:inline; 225 | } 226 | 227 | header ul { 228 | position:absolute; 229 | right:50px; 230 | top:52px; 231 | } 232 | } 233 | 234 | @media print, screen and (max-width: 720px) { 235 | body { 236 | word-wrap:break-word; 237 | } 238 | 239 | header { 240 | padding:0; 241 | } 242 | 243 | header ul, header p.view { 244 | position:static; 245 | } 246 | 247 | pre, code { 248 | word-wrap:normal; 249 | } 250 | } 251 | 252 | @media print, screen and (max-width: 480px) { 253 | body { 254 | padding:15px; 255 | } 256 | 257 | header ul { 258 | width:99%; 259 | } 260 | 261 | header li, header ul li + li + li { 262 | width:33%; 263 | } 264 | } 265 | 266 | @media print { 267 | body { 268 | padding:0.4in; 269 | font-size:12pt; 270 | color:#444; 271 | } 272 | } 273 | 274 | 275 | /* 276 | Copyright 2014 GitHub Inc. 277 | 278 | Licensed under the Apache License, Version 2.0 (the "License"); 279 | you may not use this file except in compliance with the License. 280 | You may obtain a copy of the License at 281 | 282 | http://www.apache.org/licenses/LICENSE-2.0 283 | 284 | Unless required by applicable law or agreed to in writing, software 285 | distributed under the License is distributed on an "AS IS" BASIS, 286 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 287 | See the License for the specific language governing permissions and 288 | limitations under the License. 289 | 290 | */ 291 | 292 | .pl-c /* comment */ { 293 | color: #969896; 294 | } 295 | 296 | .pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */, 297 | .pl-s .pl-v /* string variable */ { 298 | color: #0086b3; 299 | } 300 | 301 | .pl-e /* entity */, 302 | .pl-en /* entity.name */ { 303 | color: #795da3; 304 | } 305 | 306 | .pl-s .pl-s1 /* string source */, 307 | .pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ { 308 | color: #333; 309 | } 310 | 311 | .pl-ent /* entity.name.tag */ { 312 | color: #63a35c; 313 | } 314 | 315 | .pl-k /* keyword, storage, storage.type */ { 316 | color: #a71d5d; 317 | } 318 | 319 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */, 320 | .pl-s /* string */, 321 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */, 322 | .pl-sr /* string.regexp */, 323 | .pl-sr .pl-cce /* string.regexp constant.character.escape */, 324 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */, 325 | .pl-sr .pl-sre /* string.regexp source.ruby.embedded */ { 326 | color: #183691; 327 | } 328 | 329 | .pl-v /* variable */ { 330 | color: #ed6a43; 331 | } 332 | 333 | .pl-id /* invalid.deprecated */ { 334 | color: #b52a1d; 335 | } 336 | 337 | .pl-ii /* invalid.illegal */ { 338 | background-color: #b52a1d; 339 | color: #f8f8f8; 340 | } 341 | 342 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ { 343 | color: #63a35c; 344 | font-weight: bold; 345 | } 346 | 347 | .pl-ml /* markup.list */ { 348 | color: #693a17; 349 | } 350 | 351 | .pl-mh /* markup.heading */, 352 | .pl-mh .pl-en /* markup.heading entity.name */, 353 | .pl-ms /* meta.separator */ { 354 | color: #1d3e81; 355 | font-weight: bold; 356 | } 357 | 358 | .pl-mq /* markup.quote */ { 359 | color: #008080; 360 | } 361 | 362 | .pl-mi /* markup.italic */ { 363 | color: #333; 364 | font-style: italic; 365 | } 366 | 367 | .pl-mb /* markup.bold */ { 368 | color: #333; 369 | font-weight: bold; 370 | } 371 | 372 | .pl-md /* markup.deleted, meta.diff.header.from-file */ { 373 | background-color: #ffecec; 374 | color: #bd2c00; 375 | } 376 | 377 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ { 378 | background-color: #eaffea; 379 | color: #55a532; 380 | } 381 | 382 | .pl-mdr /* meta.diff.range */ { 383 | color: #795da3; 384 | font-weight: bold; 385 | } 386 | 387 | .pl-mo /* meta.output */ { 388 | color: #1d3e81; 389 | } 390 | 391 | 392 | /* 393 | * Styles of the examples 394 | */ 395 | 396 | .example { 397 | padding: 12.5px 0; 398 | } 399 | 400 | .u-border { 401 | border: 3px solid blue; 402 | } 403 | 404 | 405 | .example { 406 | padding: 0 25px; 407 | } 408 | 409 | .i { 410 | width: 96px; 411 | height: 96px; 412 | } 413 | .i--red { 414 | fill: #cc0000; 415 | } 416 | 417 | .i { 418 | width: 96px; 419 | height: 96px; 420 | } 421 | .i--blue { 422 | fill: #0000CC; 423 | } 424 | .i--white { 425 | fill: #FFFFFF; 426 | stroke:black; 427 | stroke-width:3; 428 | opacity:0.7; 429 | } 430 | .i--red { 431 | fill: #cc0000; 432 | } 433 | .middle-icon { 434 | margin-left:10px; 435 | margin-right:10px; 436 | } 437 | 438 | .footer-menu { 439 | padding: 25px 25px; 440 | } 441 | 442 | 443 | 444 | .btn { 445 | display: inline-block; 446 | text-align: center; 447 | margin: 0; 448 | cursor: pointer; 449 | background-color: #fff; 450 | color: #333; 451 | padding: .5em; 452 | line-height: 1; 453 | border: solid #333 2px; 454 | border-radius: 5px; 455 | font-size: 16px; 456 | } 457 | 458 | .btn:hover { 459 | color: #fff; 460 | background-color: #333; 461 | } 462 | 463 | .btn .i { 464 | width: 64px; 465 | height: 64px; 466 | fill: currentColor; 467 | } 468 | 469 | .anchor { 470 | display: none; 471 | } 472 | 473 | h4:hover .anchor { 474 | display: inline; 475 | } 476 | -------------------------------------------------------------------------------- /lib/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Icon #className 1`] = ` 4 | 8 | 12 | 13 | `; 14 | 15 | exports[`Icon #title 1`] = ` 16 | 20 | 21 | Test title 22 | 23 | 27 | 28 | `; 29 | 30 | exports[`Icon renders 1`] = ` 31 | 35 | 39 | 40 | `; 41 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | /** 5 | * react-svg-icon Accessible SVG icon component. 6 | */ 7 | const Icon = ({ name, title, className }) => ( 8 | 12 | {title ? ( 13 | {title} 14 | ) : null} 15 | 19 | 20 | ); 21 | 22 | Icon.propTypes = { 23 | name: PropTypes.string.isRequired, 24 | title: PropTypes.string, 25 | className: PropTypes.string, 26 | }; 27 | 28 | Icon.defaultProps = { 29 | title: null, 30 | className: null, 31 | }; 32 | 33 | export default Icon; 34 | -------------------------------------------------------------------------------- /lib/index.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import Icon from './index'; 4 | 5 | describe('Icon', () => { 6 | it('renders', () => { 7 | expect(shallow()).toMatchSnapshot(); 8 | }); 9 | 10 | it('#className', () => { 11 | expect(shallow()).toMatchSnapshot(); 12 | }); 13 | 14 | it('#title', () => { 15 | expect(shallow()).toMatchSnapshot(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-svg-icon", 3 | "version": "4.0.1", 4 | "description": "Accessible SVG icon component for React", 5 | "main": "./dist/index.js", 6 | "author": "Springload", 7 | "license": "MIT", 8 | "homepage": "https://springload.github.io/react-svg-icon/", 9 | "bugs": "https://github.com/springload/react-svg-icon/issues", 10 | "keywords": [ 11 | "reactjs", 12 | "react", 13 | "react-component", 14 | "component", 15 | "accessible", 16 | "a11y", 17 | "svg", 18 | "icon", 19 | "icons" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/springload/react-svg-icon.git" 24 | }, 25 | "eslintConfig": { 26 | "extends": "springload" 27 | }, 28 | "jest": { 29 | "testPathIgnorePatterns": [ 30 | "/node_modules/", 31 | "/dist/", 32 | "/pages/", 33 | "/examples/test.js" 34 | ], 35 | "snapshotSerializers": [ 36 | "enzyme-to-json/serializer" 37 | ] 38 | }, 39 | "babel": { 40 | "presets": [ 41 | [ 42 | "env", 43 | { 44 | "targets": { 45 | "browsers": [ 46 | "> 1%", 47 | "IE 11" 48 | ] 49 | } 50 | } 51 | ], 52 | "react" 53 | ] 54 | }, 55 | "devDependencies": { 56 | "babel-cli": "^6.22.2", 57 | "babel-jest": "^19.0.0", 58 | "babel-loader": "^6.2.10", 59 | "babel-preset-env": "^1.4.0", 60 | "babel-preset-react": "^6.16.0", 61 | "coveralls": "^2.11.15", 62 | "enzyme": "^2.8.2", 63 | "enzyme-to-json": "^1.5.1", 64 | "eslint": "^3.19.0", 65 | "eslint-config-springload": "1.0.2", 66 | "eslint-plugin-import": "2.2.0", 67 | "eslint-plugin-jsx-a11y": "3.0.2", 68 | "eslint-plugin-react": "6.10.3", 69 | "jest": "^19.0.2", 70 | "prop-types": "^15.5.8", 71 | "react": "^15.5.4", 72 | "react-dom": "^15.5.4", 73 | "react-test-renderer": "^15.5.4", 74 | "webpack": "^2.4.1", 75 | "webpack-dev-server": "^2.4.5" 76 | }, 77 | "peerDependencies": { 78 | "prop-types": "^15.5.8 || ^16.0.0", 79 | "react": "^0.14.9 || ^15.3.0 || ^16.0.0", 80 | "react-dom": "^0.14.9 || ^15.3.0 || ^16.0.0" 81 | }, 82 | "scripts": { 83 | "start": "webpack-dev-server --config=webpack/webpack.config.dev.js", 84 | "js": "babel -d dist lib", 85 | "dist": "npm run js -s", 86 | "linter:js": "eslint", 87 | "lint": "npm run linter:js -s -- .", 88 | "test": "jest", 89 | "test:watch": "jest --watch --coverage", 90 | "test:coverage": "jest --coverage", 91 | "test:ci": "npm run lint -s && npm run test:coverage -s && npm run dist -s && npm run pages -s", 92 | "coveralls": "cat ./coverage/lcov.info | coveralls", 93 | "pages": "rm -rf pages && cp -R examples pages && webpack --config=webpack/webpack.config.prod.js", 94 | "deploy": "./bin/deploy.sh" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | // See http://webpack.github.io/docs/configuration.html#devtool 6 | devtool: 'inline-source-map', 7 | entry: { 8 | vendor: ['react', 'react-dom'], 9 | basic: './examples/basic', 10 | }, 11 | output: { 12 | path: path.join(__dirname, '..', 'build'), 13 | filename: '[name].bundle.js', 14 | publicPath: '/assets/', 15 | }, 16 | plugins: [ 17 | new webpack.HotModuleReplacementPlugin(), 18 | new webpack.NoEmitOnErrorsPlugin(), 19 | new webpack.DefinePlugin({ 20 | 'process.env': { 21 | NODE_ENV: JSON.stringify('development'), 22 | }, 23 | }), 24 | new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), 25 | ], 26 | module: { 27 | rules: [ 28 | { 29 | test: /\.js$/, 30 | use: ['babel-loader'], 31 | exclude: /node_modules/, 32 | }, 33 | ], 34 | }, 35 | stats: { 36 | // Add chunk information (setting this to `false` allows for a less verbose output) 37 | chunks: false, 38 | // Add the hash of the compilation 39 | hash: false, 40 | // `webpack --colors` equivalent 41 | colors: true, 42 | // Add information about the reasons why modules are included 43 | reasons: false, 44 | // Add webpack version information 45 | version: false, 46 | }, 47 | 48 | // Some libraries import Node modules but don't use them in the browser. 49 | // Tell Webpack to provide empty mocks for them so importing them works. 50 | node: { 51 | fs: 'empty', 52 | net: 'empty', 53 | tls: 'empty', 54 | }, 55 | devServer: { 56 | contentBase: path.join(__dirname, '..', 'examples'), 57 | compress: true, 58 | hot: true, 59 | port: 4000, 60 | overlay: true, 61 | }, 62 | }; 63 | -------------------------------------------------------------------------------- /webpack/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const config = require('./webpack.config.dev'); 4 | 5 | config.watch = false; 6 | config.devtool = false; 7 | config.output.path = path.join(__dirname, '..', 'pages', 'assets'); 8 | 9 | config.plugins = [ 10 | new webpack.DefinePlugin({ 11 | 'process.env': { 12 | NODE_ENV: JSON.stringify('production'), 13 | }, 14 | }), 15 | new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), 16 | new webpack.optimize.UglifyJsPlugin({ 17 | compress: { 18 | screw_ie8: true, // React doesn't support IE8 19 | warnings: false, 20 | }, 21 | mangle: { 22 | screw_ie8: true, 23 | }, 24 | output: { 25 | comments: false, 26 | screw_ie8: true, 27 | }, 28 | }), 29 | ]; 30 | 31 | module.exports = config; 32 | --------------------------------------------------------------------------------