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

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/components/icons/docs.mdx.js"]=function(e){function t(t){for(var a,s,i=t[0],c=t[1],r=t[2],u=0,h=[];u<i.length;u++)s=i[u],o[s]&&h.push(o[s][0]),o[s]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(d&&d(t);h.length;)h.shift()();return l.push.apply(l,r||[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],a=!0,i=1;i<n.length;i++){var c=n[i];0!==o[c]&&(a=!1)}a&&(l.splice(t--,1),e=s(s.s=n[0]))}return e}var a={},o={4:0},l=[];function s(t){if(a[t])return a[t].exports;var n=a[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=a,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},s.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var r=0;r<i.length;r++)t(i[r]);var d=c;return l.push([86,0]),n()}({0:function(e,t){e.exports=React},6:function(e,t){e.exports=JSBeautify},85:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.CustomIcon=void 0;var a=s(n(0)),o=s(n(4)),l=s(n(1));function s(e){return e&&e.__esModule?e:{default:e}}var i=t.CustomIcon=function(e){var t=e.symbol||"custom5";return a.default.createElement("span",{className:(0,l.default)("slds-icon_container slds-icon-custom-"+t),title:e.title||"Description of icon when needed"},a.default.createElement(o.default,{className:(0,l.default)("slds-icon",e.className),sprite:"custom",symbol:t}),a.default.createElement("span",{className:"slds-assistive-text"},e.assistiveText||"Description of icon when needed"))};t.default=a.default.createElement(i,null)},86:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var a=n(0),o=(p(a),n(7)),l=p(o),s=p(n(9)),i=p(n(11)),c=p(n(10)),r=p(n(12)),d=n(8),u=n(38),h=n(85),f=n(31),m=n(15);function p(e){return e&&e.__esModule?e:{default:e}}var g=o.factories.a,y=o.factories.code,v=o.factories.em,E=o.factories.h2,b=o.factories.h3,x=o.factories.li,S=o.factories.p,_=o.factories.ul,w=t.getElement=function(){return(0,a.createElement)(l.default,{},(0,a.createElement)("div",{className:"doc lead"},"Icons provide visual context and enhance usability. All of the Icons can be found ",(0,a.createElement)("a",{href:"/icons"},"here"),"."),(0,a.createElement)(c.default,{title:"Base Default"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-default"}))),E({id:"Usage"},"Usage"),S({},"Five separate SVG sprites are used to create icons — ",g({href:"/icons/#action"},"action"),", ",g({href:"/icons/#custom"},"custom"),", ",g({href:"/icons/#doctype"},"doctype"),", ",g({href:"/icons/#standard"},"standard ")," and ",g({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 ",g({href:"/icons/"},"icon page"),".)"),S({},"When placing the icon code into your page, customize the path in the ",y({},"use")," attribute of the ",y({},"svg")," to the proper path and icon name for your specific icon. For example, the ",v({},"case")," icon in the ",v({},"standard")," sprite would have a path like this:"),(0,a.createElement)(i.default,{toggleCode:!1},(0,a.createElement)("svg",{"aria-hidden":"true",className:"slds-icon",title:"when needed"},(0,a.createElement)("use",{xlinkHref:"/assets/icons/standard-sprite/svg/symbols.svg#case"}))),(0,a.createElement)(r.default,{type:"note",header:"Note"},"If an icon has more than one word in the name, it should be included in the `use` attribute with the underscore separator as shown on the icon page. For example: log_a_call."),E({id:"Accessibility"},"Accessibility"),S({},"Icons require a containing element for two reasons:"),_({},x({},"If assistive text is required, the containing element should contain both the icon and a ",y({},"<span>")," with hidden assistive text describing the icon using the ",y({},"slds-assistive-text")," class."),x({},"If the icon is used without a visible, descriptive label, a ",y({},"title")," attribute is needed on the containing element. The ",y({},"title")," should describe the icon.")),S({},"If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required."),S({},"The containing element must have the ",y({},"slds-icon_container")," class."),(0,a.createElement)(r.default,{type:"note",header:"Note"},"You must require SLDS in your application for SVG sprites to work. If you’re using Visualforce, see ",(0,a.createElement)("a",{href:"/platforms/visualforce"},"the Visualforce tutorial"),". If you’re using ",(0,a.createElement)("a",{href:"/platforms/lightning"},"Lightning components, see this documentation"),"."),_({},x({},"You can access the SVG sprites by downloading the entire ",g({href:"/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 ",y({},"body")," element. Alternatively, you can leave the sprite in the assets/icons directory and link to it from your page. To render a sprited icon, add the tiny ",g({href:"https://github.com/jonathantneal/svg4everybody"},"SVG for Everybody")," script for Internet Explorer."),x({},"When placed into the ",y({},"body"),", the SVG sprite takes up space in the page. Use either ",y({},"display:none")," or ",y({},"position:absolute")," and set both the width and height to zero.")),E({id:"Background-Color"},"Background Color"),S({},"To change a background color for action, custom, or standard icons, use composed class names:"),(0,a.createElement)("code",{className:"docs"},".slds-icon-[sprite name]-[icon name]"),S({},"Place the class on the ",y({},".slds-icon_container"),"."),(0,a.createElement)(i.default,{toggleCode:!1},(0,a.createElement)("div",{className:"slds-icon_container slds-icon-standard-account"})),S({},"Some icon names have more than one word, separated by ",y({},"_")," underscores. Replace underscores with dashes when composing the class name. So ",y({},"log_a_call")," in the standard icon set becomes ",y({},".slds-icon-action-log-a-call"),"."),_({},x({},"For ",g({href:"/components/icons?variant=action"},"action")," icons, add the ",y({},".slds-icon_container_circle")," class to the container (",y({},".slds-icon_container"),"), which changes the background shape to a circle."),x({},g({href:"/components/icons?variant=doctype"},"Doctype")," icons have no background color."),x({},g({href:"/components/icons?variant=standard"},"Standard")," and ",g({href:"/components/icons?variant=custom"},"Custom")," icons have a rounded square shape and use a class on the container for the background color."),x({},g({href:"/components/icons?variant=base"},"Utility")," icons have no background color.")),E({id:"Current-Color"},"Current Color"),S({},"To change the fill of an icon to match the current color of its parent, add the ",y({},"slds-current-color")," class to the icon's container. This class utilizes the CSS ",y({},"currentColor")," value."),(0,a.createElement)(c.default,{title:"Current Color"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{containerClassName:"slds-current-color"}))),E({id:"Types"},"Types"),b({id:"Action"},"Action"),S({},"To view all available action icons, see ",g({href:"/icons/#action"},"action icons"),"."),(0,a.createElement)(c.default,{title:"Action"},(0,a.createElement)(s.default,null,(0,a.createElement)(u.ActionIcon,null))),b({id:"Custom"},"Custom"),S({},"Custom icons have a rounded square shape and use a class on the container for the background color."),S({},"To view all available custom icons, see ",g({href:"/icons/#custom"},"custom icons"),"."),(0,a.createElement)(c.default,{title:"Custom"},(0,a.createElement)(s.default,null,(0,a.createElement)(h.CustomIcon,null))),b({id:"Doctype"},"Doctype"),S({},"To view all available doctype icons, see ",g({href:"/icons/#doctype"},"doctype icons"),"."),(0,a.createElement)(c.default,{title:"Doctype"},(0,a.createElement)(s.default,null,(0,a.createElement)(f.DoctypeIcon,null))),b({id:"Standard"},"Standard"),S({},"Standard icons have a rounded square shape and use a class on the container for the background color."),S({},"To view all available standard icons, see ",g({href:"/icons/#standard"},"standard icons"),"."),(0,a.createElement)(c.default,{title:"Standard"},(0,a.createElement)(s.default,null,(0,a.createElement)(m.StandardIcon,null))),E({id:"Color"},"Color"),b({id:"Default"},"Default"),S({},"To change the fill of an icon to the default text color, add the ",y({},"slds-icon-text-default")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility Default"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-default"}))),b({id:"Success"},"Success"),S({},"To change the fill of an icon to the success text color, add the ",y({},"slds-icon-text-success")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility Warning"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-success"}))),b({id:"Warning"},"Warning"),S({},"To change the fill of an icon to the warning text color, add the ",y({},"slds-icon-text-warning")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility Warning"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-warning"}))),b({id:"Error"},"Error"),S({},"To change the fill of an icon to the error text color, add the ",y({},"slds-icon-text-error")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility Error"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-error"}))),b({id:"Light"},"Light"),S({},"To change the fill of an icon to the light text color, add the ",y({},"slds-icon-text-light")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility Light"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-light"}))),E({id:"Size"},"Size"),S({},"Size modifiers can be added to the ",y({},"slds-icon")," element on all types of icons."),b({id:"XX-Small"},"XX-Small"),S({},"To change the size of an icon to xx-small, add the ",y({},"slds-icon_xx-small")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility XX-Small"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-default slds-icon_xx-small"}))),b({id:"X-Small"},"X-Small"),S({},"To change the size of an icon to x-small, add the ",y({},"slds-icon_x-small")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility X-Small"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-default slds-icon_x-small"}))),b({id:"Small"},"Small"),S({},"To change the size of an icon to small, add the ",y({},"slds-icon_small")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility Small"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-default slds-icon_small"}))),b({id:"Large"},"Large"),S({},"To change the size of an icon to large, add the ",y({},"slds-icon_large")," class to the icon."),(0,a.createElement)(c.default,{title:"Utility Large"},(0,a.createElement)(s.default,null,(0,a.createElement)(d.UtilityIcon,{className:"slds-icon-text-default slds-icon_large"}))))};t.getContents=function(){return(0,o.createTableOfContents)(w())}}});