| 38 | // [2]: https://github.com/palantir/blueprint/blob/develop/packages/core/scripts/sass-custom-functions.js |
| 39 | |
| 40 | const svgIcon = (path, selectors) => { |
| 41 | // Parse a string "16px/chevron-right.svg" into size (16) and a name (chevron-right). |
| 42 | const { size, name } = path |
| 43 | .getValue() |
| 44 | .match(/^(?<size>16|20)px\/(?<name>[a-z\-]+)\.svg$/)?.groups; |
| 45 | |
| 46 | // The `selectors` argument is a nested map that represents CSS rules. For example: |
| 47 | // (path: (fill: '#000')). We try to find a `fill` property in the list and use that |
| 48 | // in the SVG generated below. |
| 49 | const fill = findFill(selectors); |
| 50 | |
| 51 | // Get the SVG path for requested icon size and name. |
| 52 | const svgPaths = size === '16' ? IconSvgPaths16 : IconSvgPaths20; |
| 53 | const svgPath = svgPaths[iconNameToPathsRecordKey(name)]; |
| 54 | |
| 55 | // Assemble an icon SVG element and encode it as a data URI. |
| 56 | const svg = |
| 57 | `<svg viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">` + |
| 58 | `<path fill-rule="evenodd" clip-rule="evenodd" fill="${fill}" d="${svgPath}" />` + |
| 59 | `</svg>`; |
| 60 | |
| 61 | const value = `url('data:image/svg+xml,${encodeURIComponent(svg)}')`; |
| 62 | |
| 63 | return new sass.types.String(value); |
| 64 | }; |
| 65 | |
| 66 | module.exports = { |
| 67 | style: { |