var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},i=(a,e,s,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!k.call(a,t)&&t!==s&&l(a,t,{get:()=>e[t],enumerable:!(c=m(e,t))||c.enumerable});return a};var y=(a,e,s)=>(s=a!=null?d(N(a)):{},i(e||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>i(l({},"__esModule",{value:!0}),a);var r=g((T,o)=>{o.exports=_jsx_runtime});var v={};b(v,{default:()=>p,frontmatter:()=>w});var n=y(r()),w={title:"React component for SVG icons",date:"2015-11-11",tags:["react","svg"]};function h(a){let e={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h2,{id:"a-day-late-and-a-dollar-short",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#a-day-late-and-a-dollar-short",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"A day late and a dollar short"]}),` `,(0,n.jsx)(e.p,{children:"I\u2019ve been using React v0.13 which has some trouble handling SVG elements. Last month I decided to create a component to help with that problem. Here\u2019s the gist on github:"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://gist.github.com/brawlins/e84c28badd0e6172d9e5",children:"Gist: SvgIcon.js"})}),` `,(0,n.jsxs)(e.p,{children:["However, with the release of v0.14, React now handles SVG elements fine. You just have to be sure to camelcase the attributes (\u201CxlinkHref\u201D instead of \u201Cxlink:href\u201D). ",(0,n.jsx)("a",{href:"https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#notable-enhancements",target:"_blank",children:"See the release notes"})," for details."]}),` `,(0,n.jsx)(e.p,{children:"I decided to post this anyway just in case it\u2019s useful to anyone."}),` `,(0,n.jsxs)(e.h2,{id:"the-problem",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#the-problem",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"The problem"]}),` `,(0,n.jsx)(e.p,{children:"The problem is that SVG is an XML-based format and React was not set up to digest XML. So when React encountered an element like this in the JSX:"}),` `,(0,n.jsx)(e.pre,{className:"language-html",children:(0,n.jsxs)(e.code,{className:"language-html code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"viewBox"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"0 0 50 50",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"use"]})," ",(0,n.jsxs)(e.span,{className:"token attr-name",children:[(0,n.jsx)(e.span,{className:"token namespace",children:"xlink:"}),"href"]}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"#icon-checkmark",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["it would choke on the ",(0,n.jsx)(e.code,{children:"xlink:href"})," attribute and throw an error."]}),` `,(0,n.jsxs)(e.h2,{id:"the-solution",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#the-solution",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"The solution"]}),` `,(0,n.jsxs)(e.p,{children:["The workaround involves using React\u2019s ",(0,n.jsx)(e.code,{children:"dangerouslySetInnerHTML"})," property. If you create an HTML element (say a ",(0,n.jsx)(e.code,{children:""})," tag), you can set its inner HTML using this property and then React doesn\u2019t care what you put in there. It trusts that you know what you\u2019re doing."]}),` `,(0,n.jsx)(e.p,{children:"The implementation looks like this:"}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"createElement"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'span'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dangerouslySetInnerHTML"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"__html"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'whatever HTML I want'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.h2,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsxs)(e.p,{children:["I usually insert a single SVG document at the top of the ",(0,n.jsx)(e.code,{children:""})," element that contains symbol definitions for icons that I can use. Then they can be referenced anywhere in the application with the ",(0,n.jsx)(e.code,{children:""})," tag as shown above."]}),` `,(0,n.jsx)(e.p,{children:"Here\u2019s an example. If I pass the component these props:"}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"SvgIcon"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" classNames",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:"'icon'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'spin'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" show",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"state"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"loading"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" symbolId",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"icon-loader"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" wrapperTag",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"span"'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"it will render this HTML:"}),` `,(0,n.jsx)(e.pre,{className:"language-html",children:(0,n.jsxs)(e.code,{className:"language-html code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"span"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"icon spin",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"use"]})," ",(0,n.jsxs)(e.span,{className:"token attr-name",children:[(0,n.jsx)(e.span,{className:"token namespace",children:"xlink:"}),"href"]}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"#icon-loader",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Here I\u2019m rendering a spinning loader icon inside of a span tag. This will be rendered when ",(0,n.jsx)(e.code,{children:"{this.state.loading}"})," is true and disappear when it is false."]}),` `,(0,n.jsx)(e.p,{children:"The component has the following propTypes. The only one that is required is symbolId:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"classNames"}),": array of class names"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"show"}),": boolean (defaults to true), usually a parent component state"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"symbolId"}),": the ID of the symbol to use in the SVG document"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"wrapperTag"}),": tag to wrap it in (defaults to span)"]}),` `]})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(h,{...a})}):h(a)}return f(v);})(); ;return Component;

Posts tagged with "svg"

Styling an SVG inserted with CSS after

React component for SVG icons