Back to migration overview

BAvatar Migration ​

Migration notes for BAvatar from BootstrapVue to BootstrapVueNext.

View Source Edit this page on GitHub
Migration Notes

BAvatar Migration ​

Summary ​

Migration notes for BAvatar from BootstrapVue to BootstrapVueNext.

Affected APIs ​

  • BAvatar
  • BLink

Breaking Change ​

HTML
template
<BAvatar>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="80%"
    height="80%"
    fill="currentColor"
    class="bi bi-person-hearts"
    viewBox="0 0 16 16"
  >
    <path
      fill-rule="evenodd"
      d="M11.5 1.246c.832-.855 2.913.642 0 2.566-2.913-1.924-.832-3.421 0-2.566M9 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-9 8c0 1 1 1 1 1h10s1 0 1-1-1-4-6-4-6 3-6 4m13.5-8.09c1.387-1.425 4.855 1.07 0 4.277-4.854-3.207-1.387-5.702 0-4.276ZM15 2.165c.555-.57 1.942.428 0 1.711-1.942-1.283-.555-2.281 0-1.71Z"
    />
  </svg>
</BAvatar>

Badge Positioning ​

Badge positioning has changed to using a single property badge-placement and our CombinedPlacement utility rather than individual properties.

For instance, use badge-placement='top' in place of badge-top or badge-placement='end' in place of badge-right. For combined props, rather than using badge-top and badge-right, use badge-placement='top-end'. This before/after mapping is straightforward and is a good candidate for codemod-style replacement.

Rounding Sides ​

See the Rounding section. The directional rounding changes are also straightforward to map automatically.

Migration Notes ​

  • Extracted from the canonical BootstrapVue → BootstrapVueNext migration guide.
  • Review related migrations for shared prop, event, and slot changes.

Safe Automatic Rewrite ​

Yes. This entry is mostly mechanical, but review the result when surrounding behavior or adjacent props may affect the final markup.