How to display svg icons svg files in UI using React Component

Question

I have seen lot libraries for svg on react but none gave me how to import a  svg in the react component   I have seen code which talk about bring the svg code in to react rather than using the  svg icon as image and show it in the UI    Please let me know if there are ways to embed the icon

User · Answer

If you use create-react-app 2 0 you can now do do it like this   import   ReactComponent as YourSvg   from    your-svg svg     And then use it just like you would normally use a component   const App        gt      lt div gt      lt YourSvg   gt    lt  div gt

User · Answer

Hard to believe adding a custom icon is so complicated  I found a similar solution to those posted above  but for me  I could not get the icon to display until I added the viewBox info  which I got directly from opening the SVG in a text editor    customIcon js  import React from  quot react quot   import  ReactComponent as ImportedSVG  from  quot path to myIcon svg quot   import   SvgIcon   from   material-ui core    function CustomIcon      return     lt SvgIcon component  ImportedSVG  viewBox  quot 0 0 384 512 quot   gt        export default CustomIcon   I also ran into an error with namespaces and had to clean up the SVG before it would work  following advice from this post

User · Answer

If your SVG includes sprites  here s a component you can use  We have three or four groups of sprites    obviously you can pull that bit out if you only have one sprite file   The Sprite component   import React from  react  import PropTypes from  prop-types    export default class Sprite extends React Component     static propTypes         label  PropTypes string      group  PropTypes string      sprite  PropTypes string isRequired        filepath spriteGroup          if spriteGroup    undefined     spriteGroup    base        return   asset path sprite     spriteGroup     svg          render           return         lt svg aria-hidden  true  title  this props label  gt           lt use xlinkHref     this filepath this props group     this props sprite    gt  lt  use gt         lt  svg gt                And elsewhere in React you would   import Sprite from    Sprite    render                lt Sprite label  No Current Value  group  base  sprite  clock    gt      Example from our  base  sprite file  sprite base svg    lt svg xmlns  http   www w3 org 2000 svg  gt     lt defs gt       lt symbol id  clock  viewBox  0 0 512 512  gt         lt path fill  currentColor  d  M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118 7-96 1 216-216 216-118 7 0-216-96 1-216-216 0-118 7 96 1-216 216-216 118 7 0 216 96 1 216 216zm-148 9 88 3l-81 2-59c-3 1-2 3-4 9-5 9-4 9-9 7V116c0-6 6 5 4-12 12-12h14c6 6 0 12 5 4 12 12v146 3l70 5 51 3c5 4 3 9 6 5 11 4 2 6 16 8l-8 2 11 3c-3 9 5 3-11 4 6 5-16 8 2 6z  class    gt         lt  path gt       lt  symbol gt       lt symbol id  arrow-up  viewBox  0 0 16 16  gt         lt polygon points  1 3 6 7 2 7 8 1 7 3 8 7 16 9 16 9 3 8 13 3 8 1 14 7 6 7 8 0   gt   lt  polygon gt       lt  symbol gt       lt symbol id  arrow-down  viewBox  0 0 16 16  gt         lt polygon points  14 7 9 3 13 3 7 9 9 12 2 9 0 7 0 7 12 2 2 7 7 9 1 3 9 3 8 16   gt   lt  polygon gt       lt  symbol gt       lt symbol id  download  viewBox  0 0 48 48  gt         lt line data-cap  butt  fill  none  stroke-width  3  stroke-miterlimit  10  x1  24  y1  3  x2  24  y2  36  stroke-linejoin  miter  stroke-linecap  butt  gt  lt  line gt         lt polyline fill  none  stroke-width  3  stroke-linecap  square  stroke-miterlimit  10  points  11 23 24 36 37 23   stroke-linejoin  miter  gt  lt  polyline gt         lt line data-color  color-2  fill  none  stroke-width  3  stroke-linecap  square  stroke-miterlimit  10  x1  2  y1  45  x2  46  y2  45  stroke-linejoin  miter  gt  lt  line gt       lt  symbol gt     lt  devs gt   lt  svg gt

User · Answer

if you have  svg or an image locally  first you have to install the loader needed for svg and file-loader for images  Then you have to import your icon or image first for example    import logo from    logos myLogo svg    import image from    images myimage png    const temp           lt div gt            lt img src  logo    gt            lt img src  image    gt        lt  div gt      ReactDOM render temp document getElementByID  app        Happy Coding      resources from react website and worked for me after many searches  https   create-react-app dev docs adding-images-fonts-and-files

User · Answer

You can also import  svg   jpg   png   ttf  etc  files like     ReactDOM render         lt img src  require    svg kiwi svg     gt         document getElementById  root

User · Answer

There are two ways I want to show you   The first one is just a simple import of the required SVG   import MyImageSvg from        path to svg     Just remember to use a loader for e g  Webpack           test      ttf eot svg woff 2       a-z0-9  amp               include   Path join   dirname   src assets          loader   file-loader name assets  name   ext        Another  and more elegant way  is that you can define an SVG icon sprite and use a component to fetch the correct sprite of the SVG  For example   import React from  react   import Icons from        assets icons icons svg      Path to your icons svg import PropTypes from  prop-types    const Icon      name  color  size      gt       lt svg className   icon icon-  name    fill  color  width  size  height  size  gt       lt use xlinkHref     Icons  icon-  name      gt     lt  svg gt      Icon propTypes       name  PropTypes string isRequired    color  PropTypes string    size  PropTypes number     export default Icon    The icon sprite  icons svg  can be defined as    lt svg xmlns  http   www w3 org 2000 svg  style  display  none   gt        lt symbol id  icon-account-group  viewBox  0 0 512 512  gt         lt path d  m256 301l0-41c7-7 19-24 21-60 10-5 16-16 16-30 0-12-4-22-12-28 7-13 18-37 12-60-7-28-48-39-81-39-29 0-65 8-77 30-12-1-20 2-26 9-15 16-8 46-4 62 1 2 2 4 2 5l0 42c0 41 24 63 42 71l0 39c-8 3-17 7-26 10-56 20-104 37-112 64-11 31-11 102-11 105 0 6 5 11 11 11l384 0c6 0 10-5 10-11 0-3 0-74-10-105-11-31-69-48-139-74z m-235 168c1-20 3-66 10-88 5-16 57-35 99-50 12-4 23-8 34-12 4-2 7-6 7-10l0-54c0-4-3-9-8-10-1 0-35-12-35-54l0-42c0-3-1-5-2-11-2-8-9-34-2-41 3-4 11-3 15-2 6 1 11-2 13-8 3-13 29-22 60-22 31 0 57 9 60 22 5 17-6 37-11 48-3 6-5 10-5 14 0 5 5 10 11 10 3 0 5 6 5 11 0 4-2 11-5 11-6 0-11 4-11 10 0 43-16 55-16 55-3 2-5 6-5 9l0 54c0 4 2 8 7 10 51 19 125 41 132 62 8 22 9 68 10 88l-363 0z m480-94c-8-25-49-51-138-84l0-20c7-7 19-25 21-61 4-2 7-5 10-9 4-5 6-13 6-20 0-13-5-23-13-28 7-15 19-41 13-64-4-15-21-31-40-39-19-7-38-6-54 5-5 3-6 10-3 15 3 4 10 6 15 3 12-9 25-6 34-3 15 6 25 18 27 24 4 17-6 40-12 52-3 6-4 10-4 13 0 3 1 6 3 8 2 2 4 3 7 3 4 0 6 6 6 11 0 3-1 6-3 8-1 2-2 2-3 2-6 0-10 5-10 11 0 43-17 55-17 55-3 2-5 5-5 9l0 32c0 4 3 8 7 10 83 31 127 56 133 73 7 22 9 68 10 88l-43 0c-6 0-11 5-11 11 0 6 5 11 11 11l53 0c6 0 11-5 11-11 0-3 0-74-11-105z   gt       lt  symbol gt        lt symbol id  icon-arrow-down  viewBox  0 0 512 512  gt         lt path d  m508 109c-4-4-11-3-15 1l-237 269-237-269c-4-4-11-5-15-1-5 4-5 11-1 15l245 278c2 2 5 3 8 3 3 0 6-1 8-3l245-278c4-4 4-11-1-15z   gt       lt  symbol gt        lt symbol id  icon-arrow-left  viewBox  0 0 512 512  gt         lt path d  m133 256l269-237c4-4 5-11 1-15-4-5-11-5-15-1l-278 245c-2 2-3 5-3 8 0 3 1 6 3 8l278 245c2 2 4 3 7 3 3 0 6-1 8-4 4-4 3-11-1-15z   gt       lt  symbol gt        lt symbol id  icon-arrow-right  viewBox  0 0 512 512  gt         lt path d  m402 248l-278-245c-4-4-11-4-15 1-4 4-3 11 1 15l269 237-269 237c-4 4-5 11-1 15 2 3 5 4 8 4 3 0 5-1 7-3l278-245c2-2 3-5 3-8 0-3-1-6-3-8z   gt       lt  symbol gt   lt  svg gt    You can define your own icon sprite on http   fontastic me  for free   And the usage   lt Icon name  arrow-down  color   FFFFFF  size  35    gt   And possible add some simple styling for using the icons everywhere    class   icon-     class    icon-         display  inline-block      vertical-align  middle

User · Answer

For some reasons above mentioned approaches did now work for me  before I followed the advice to add  default like this   lt div gt     lt img src  require        mySvgImage svg   default  alt  mySvgImage    gt   lt  div gt

User · Answer

You can directly use  svg extension with img tag if the image is remotely hosted   ReactDOM render     lt img src   http   s cdpn io 3 kiwi svg    gt     document getElementById  root        Here is the fiddle  http   codepen io srinivasdamam-1471688843 pen ZLNYdy editors 0110  Note  If you are using any web app bundlers  like Webpack  you need to have related file loader

User · Answer

Just write require with path inside the src of image  it will work  like    lt img alt  Clock  src  require     assets images search icon svg     gt

User · Answer

If you want to use SVG files as React components to perform customizations and do not use create-react-app  do the following   Install the Webpack loader called svgr  yarn add --dev  svgr webpack   Update your webpack config js          module        rules                       SVG loader                 test     svg            use     svgr webpack                                Import SVG files as React component  import SomeImage from  path to image svg         lt SomeImage width  100  height  50  fill  quot pink quot  stroke  quot  0066ff quot    gt

[reactjs] How to display svg icons(.svg files) in UI using React Component?

Examples related to reactjs

Examples related to svg