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

Salesforce Lightning Design System

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