@salesforce-ux/design-system/__internal/chunked/docs/ui/components/icons/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/icons/docs.mdx.js"]=function(e){function t(t){for(var o,s,c=t[0],l=t[1],r=t[2],h=0,u=[];h<c.length;h++)s=c[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);for(d&&d(t);u.length;)u.shift()();return a.push.apply(a,r||[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],o=!0,c=1;c<n.length;c++){var l=n[c];0!==i[l]&&(o=!1)}o&&(a.splice(t--,1),e=s(s.s=n[0]))}return e}var o={},i={42:0},a=[];function s(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=o,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],l=c.push.bind(c);c.push=t,c=c.slice();for(var r=0;r<c.length;r++)t(c[r]);var d=l;return a.push([790,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},790:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return _})),n.d(t,"getContents",(function(){return T}));var o=n(0),i=n.n(o),a=n(4),s=n(2),c=n(27),l=(n(14),n(39)),r=n(11),d=n(149),h=n(10),u=n(5),f=n.n(u),p=function(e){var t=e.symbol||"custom5";return i.a.createElement("span",{className:f()("slds-icon_container slds-icon-custom-"+t),title:e.title||"Description of icon when needed"},i.a.createElement(h.a,{className:f()("slds-icon",e.className),sprite:"custom",symbol:t}),i.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText||"Description of icon when needed"))},m=n(147),b=n(35),g=n(1),y=a.c.a,v=a.c.code,O=a.c.em,j=a.c.h2,S=a.c.h3,x=a.c.li,E=a.c.p,w=a.c.ul,_=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"Icons provide visual context and enhance usability. Read more in the"," ",Object(o.createElement)("a",{href:"/guidelines/iconography",title:"Iconography Guidelines"},"Iconography design guideline")," ","and for a full list of icons available, visit the"," ",Object(o.createElement)("a",{href:"/icons",title:"Icons"},"Icons page"),"."),Object(o.createElement)(s.a,{exampleOnly:!0},Object(g.f)(r.b,"default")),j({id:"About-Icons"},"About Icons"),E({},"Five separate SVG sprites are used to create icons — ",y({href:"/icons/#action"},"action"),", ",y({href:"/icons/#custom"},"custom"),", ",y({href:"/icons/#doctype"},"doctype"),", ",y({href:"/icons/#standard"},"standard ")," and ",y({href:"/icons/#utility"},"utility"),". Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the ",y({href:"/icons/"},"icon page"),".)"),j({id:"Accessibility"},"Accessibility"),E({},"Icons require a containing element for two reasons:"),w({},x({},"If assistive text is required, the containing element should contain both the icon and a ",v({},"<span>")," with hidden assistive text describing the icon using the ",v({},"slds-assistive-text")," class."),x({},"If the icon is used without a visible, descriptive label, a ",v({},"title")," attribute is needed on the containing element. The ",v({},"title")," should describe the icon.")),E({},"If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required."),E({},"The containing element must have the ",v({},"slds-icon_container")," class."),j({id:"Default"},"Default"),Object(o.createElement)(s.a,null,Object(g.f)(r.b,"default")),S({id:"Structure-and-Implementation"},"Structure and Implementation"),E({},"An icon must have a containing element with the class ",v({},"slds-icon_container")," for ",y({href:"#Accessibility"},"accessibility support"),". Inside the container, a ",v({},"<svg>")," with the class ",v({},"slds-icon")," contains the reference to your icon and a ",v({},"<span>")," with the class ",v({},"slds-assistive-text")," contains your hidden assistive text that describes the icon. Be sure to read the ",y({href:"#Accessibility"},"accessibility section")," to know when to use assistive text, the ",v({},"title")," attribute, or when neither is needed."),E({},"When placing the icon code into your page, customize the path in the ",v({},"use")," attribute of the ",v({},"svg")," to the proper path and icon name for your specific icon. For example, the ",O({},"case")," icon in the ",O({},"standard")," sprite would have a path like this:"),Object(o.createElement)(c.a,{toggleCode:!1},Object(o.createElement)("svg",{"aria-hidden":"true",className:"slds-icon",title:"when needed"},Object(o.createElement)("use",{xlinkHref:"/assets/icons/standard-sprite/svg/symbols.svg#case"}))),E({},"If an icon has more than one word in the name, it should be included in the ",v({},"use")," attribute with the underscore separator as shown on the icon page. For example: log_a_call."),E({},"You must require SLDS in your application for SVG sprites to work. If you’re using Visualforce, see ",Object(o.createElement)("a",{href:"/platforms/visualforce"},"the Visualforce tutorial"),". If you’re using ",Object(o.createElement)("a",{href:"/platforms/lightning"}," Lightning components, see this documentation"),"."),w({},x({},"You can access the SVG sprites by downloading the entire ",y({href:"/resources/downloads"},"CSS Framework or just the icons"),". To include a sprite in your application, the recommended method is to place it into the page as the first element inside the ",v({},"body")," element. Alternatively, you can leave the sprite in the assets/icons directory and link to it from your page. To render a sprite icon, add the tiny ",y({href:"https://github.com/jonathantneal/svg4everybody"},"SVG for Everybody")," script for Internet Explorer."),x({},"When placed into the ",v({},"body"),", the SVG sprite takes up space in the page. Use either ",v({},"display:none")," or ",v({},"position:absolute")," and set both the width and height to zero.")),j({id:"Types"},"Types"),E({},"All available SVG sprites fall into one of these five main categories: action, custom, doctype, standard, and utility."),S({id:"Action"},"Action"),E({},"To view all available action icons, see ",y({href:"/icons/#action"},"action icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(d.a,null)),S({id:"Custom"},"Custom"),E({},"Custom icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available custom icons, see ",y({href:"/icons/#custom"},"custom icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(p,null)),S({id:"Doctype"},"Doctype"),E({},"To view all available doctype icons, see ",y({href:"/icons/#doctype"},"doctype icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(m.a,null)),S({id:"Standard"},"Standard"),E({},"Standard icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available standard icons, see ",y({href:"/icons/#standard"},"standard icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(b.a,null)),j({id:"Color"},"Color"),S({id:"Default-2"},"Default"),E({},"To change the fill of an icon to the default text color, add the ",v({},"slds-icon-text-default")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.b,"default")),S({id:"Current-Color"},"Current Color"),E({},"To change the fill of an icon to match the current color of its parent, add the ",v({},"slds-current-color")," class to the icon's container. This class utilizes the CSS ",v({},"currentColor")," value."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"currentColor")),S({id:"Success"},"Success"),E({},"To change the fill of an icon to the success text color, add the ",v({},"slds-icon-text-success")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-success")),S({id:"Warning"},"Warning"),E({},"To change the fill of an icon to the warning text color, add the ",v({},"slds-icon-text-warning")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-warning")),S({id:"Error"},"Error"),E({},"To change the fill of an icon to the error text color, add the ",v({},"slds-icon-text-error")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-error")),S({id:"Light"},"Light"),E({},"To change the fill of an icon to the light text color, add the ",v({},"slds-icon-text-light")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"light")),j({id:"Size"},"Size"),E({},"Size modifiers can be added to the ",v({},"slds-icon")," element on all types of icons."),S({id:"XX-Small"},"XX-Small"),E({},"To change the size of an icon to xx-small, add the ",v({},"slds-icon_xx-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-xxsmall")),S({id:"X-Small"},"X-Small"),E({},"To change the size of an icon to x-small, add the ",v({},"slds-icon_x-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-xsmall")),S({id:"Small"},"Small"),E({},"To change the size of an icon to small, add the ",v({},"slds-icon_small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-small")),S({id:"Large"},"Large"),E({},"To change the size of an icon to large, add the ",v({},"slds-icon_large")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-large")),j({id:"Right-to-Left-Support"},"Right-to-Left Support"),E({},"To horizontally flip an icon to support bidirectionality (reading from right to left), use the ",v({},"slds-icon_flip")," class with the ",v({},"slds-icon_container")," class, and setting the ",v({},"dir")," attribute on any parent container, most often the parent component or on ",v({},"html")," itself."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"rtl-flipped")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(l.a,{name:"icons",type:"component"}))},T=function(){return Object(a.a)(_())}}});