Skip to content

Update dependency @primer/octicons-react to v10

Administrator requested to merge renovate/primer-octicons-react-10.x into main

Created by: renovate[bot]

This PR contains the following updates:

Package Type Update New value References Sourcegraph
@primer/octicons-react dependencies major ^10.1.0 source code search for "@primer/octicons-react"

Release Notes

primer/octicons

v10.1.0

Compare Source

🚀 New Features
🐛 Fixes
  • Corrected positioning for triangle-down #​459
🧽Chores
  • Dependency updates

v10.0.0

Compare Source

All packages

  • We've given Octicons a new look ✨ Some icons have new names and some icons haven't been redesigned yet. The following table documents those changes. If you're using an octicon in v9.x that doesn't have an equivelent in v10.0 yet, let us know by opening an issue.
v9.x v10.0 Notes
arrow-small-down arrow-down
arrow-small-left arrow-left
arrow-small-right arrow-right
arrow-small-up arrow-up
browser Request this icon
bug Request this icon
circuit-board cpu
cloud-download download
cloud-upload upload
dashboard meter
dependent package-dependents
device-camera Request this icon
file-pdf file
file-symlink-directory file-submodule
gist-secret lock
gist code-square
github-action Request this icon
heart-outline heart
internal-repo repo
jersey people
keyboard Request this icon
line-arrow-down arrow-down
line-arrow-left arrow-left
line-arrow-right arrow-right
line-arrow-up arrow-up
mail-read mail
no-newline no-entry
paintcan paintbrush
plus-small plus
primitive-dot-stroke dot
primitive-dot dot-fill
primitive-square square-fill
radio-tower broadcast
repo-clone Request this icon
repo-force-push repo-push
repo-pull Request this icon
repo-template-private Request this icon
request-changes diff
saved bookmark
text-size heading or typography
triangle-down caret-down
triangle-left caret-left
triangle-right caret-right
triangle-up caret-up
unsaved bookmark-slash
watch hourglass
workflow-all Request this icon
  • We designed a set of 24px icons—as well as 16px icons—to accommodate interfaces that need larger icons. All package implementations now choose which SVG to render based on the size passed in.

React (@​primer/octicons-react)

  • Icon components (e.g. AlertIcon, ArrowRightIcon, etc.) now accept size, ariaLabel, verticalAlign, and className props and can be used on their own. No need to pass them to the Octicon component.

    <AlertIcon size={24} />

  • Icon components will now choose the best SVG icon to render based on the size passed in.

  • The Octicon component is deprecated. Use icon components on their own instead:

    - <Octicon icon={AlertIcon} />
+ <AlertIcon />
BREAKING CHANGES 💥

  • All icon component names now include Icon at the end (e.g. Alert → AlertIcon).

  • In order to enable tree-shaking, we removed the iconsByName and getIconByName exports.

  • Octicon no longer accepts width or height props. Use the size prop instead. In cases where the width and height of an icon are not equal (e.g. logos), the height will be set to the value of the size prop and the width will be scaled proportionally.

  • We renamed the ariaLabel prop to aria-label to be consistent with React: https://reactjs.org/docs/accessibility.html#wai-aria

    - <AlertIcon ariaLabel="alert">
+ <AlertIcon aria-label="alert">

  • Setting verticalAlign="top" on the Octicon component or any icon component will now apply a vertical-align: top; style to the <svg>. Previously, we were translating "top" to "text-top." So setting verticalAlign="top" would apply a vertical-align: text-top; style to the <svg>. If you want a vertical alignment of "text-top," set the verticalAlign prop to "text-top".

  • Custom icon components passed to the Octicon component now need to render the entire <svg>, not just the <path>.

function CirclesIcon() {
  return (
-   <React.Fragment>
+   <svg viewBox="0 0 30 10" width="30" height="10">
      <circle r={5} cx={5} cy={5}/>
      <circle r={5} cx={15} cy={5}/>
      <circle r={5} cx={25} cy={5}/>
-   </React.Fragment>
+   </svg>
  )
}

- CirclesIcon.size = [30, 10]

JavaScript (@​primer/octicons)

BREAKING CHANGES 💥
  • The structure of each icon object has been updated to allow support multiple SVGs per icon:
Before
octicons.alert
// {
//     symbol: 'alert',
//     keywords: ['warning', 'triangle', 'exclamation', 'point'],
//     toSVG: [Function],
//     width: 16,
//     height: 16,
//     path: '<path d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/>',
//     options: {
//         version: '1.1',
//         width: '16',
//         height: '16',
//         viewBox: '0 0 16 16',
//         class: 'octicon octicon-alert',
//         'aria-hidden': 'true'
//     },
// }
After
octicons.alert
// {
//     symbol: 'alert',
//     keywords: ['warning', 'triangle', 'exclamation', 'point'],
//     toSVG: [Function]
//     heights: {
//         16: {
//             width: 16,
//             path: '<path d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/>',
//             options: {
//                 version: '1.1',
//                 width: '16',
//                 height: '16',
//                 viewBox: '0 0 16 16',
//                 class: 'octicon octicon-alert',
//                 'aria-hidden': 'true'
//             },
//         },
//         24: ...
//     }
// }

Renovate configuration

📅 Schedule: "on the 1st through 7th day of the month" in timezone America/Los_Angeles.

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by WhiteSource Renovate. View repository job log here.

Merge request reports