Skip to content

Commit d481365

Browse files
authored
feat: upgrade to bootstrap icons alpha 3 (#4966)
1 parent 838dc42 commit d481365

File tree

17 files changed

+14609
-1243
lines changed

17 files changed

+14609
-1243
lines changed

.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ node_modules/
77
nuxt/plugin.template.js
88
nuxt/plugin.prod.js
99
nuxt/plugin.dev.js
10+
src/icons/icons.js

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<br>
77

88
<p align="center">
9-
BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 300 icons,
9+
BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 500 icons,
1010
provides one of the most comprehensive implementations of the Bootstrap v4 component and grid
1111
system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup.
1212
</p>

docs/components/icons-table.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
}
8181
8282
#bv-icons-table-result /deep/ .bi {
83-
font-size: 2rem;
83+
font-size: 1.5rem;
8484
}
8585
8686
.form-group /deep/ .form-text {
@@ -94,7 +94,7 @@
9494
}
9595
9696
&:hover .bi {
97-
transform: scale(2);
97+
transform: scale(1.75);
9898
}
9999
}
100100

docs/pages/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
<b-row class="mb-4">
135135
<b-col lg="10" offset-lg="1">
136136
<p class="text-lg-center">
137-
With more than 85 components, over 45 available plugins, several directives, and 300+ icons,
137+
With more than 85 components, over 45 available plugins, several directives, and 500+ icons,
138138
<span class="bd-text-purple-bright">BootstrapVue</span> provides one of the most
139139
comprehensive implementations of the
140140
<span class="bd-text-purple-bright">Bootstrap v{{ bootstrapVersionMinor }}</span> component and grid system
@@ -208,7 +208,7 @@
208208

209209
<b-card tag="article" body-text-variant="muted" class="rounded-0 border-0">
210210
<b-card-text text-tag="h3" class="h5 text-center bd-text-purple-bright mb-2">
211-
<b-icon icon="columns-gutters" width="2.5em" height="2.5em" class="mx-auto d-block mb-3"></b-icon>
211+
<b-icon icon="columns-gap" width="2.5em" height="2.5em" class="mx-auto d-block mb-3"></b-icon>
212212
<span>Modular</span>
213213
</b-card-text>
214214
<b-card-text class="text-center">

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
"babel-eslint": "^10.1.0",
111111
"babel-jest": "^25.1.0",
112112
"babel-plugin-istanbul": "^6.0.0",
113-
"bootstrap-icons": "^1.0.0-alpha2",
113+
"bootstrap-icons": "^1.0.0-alpha3",
114114
"clean-css-cli": "^4.3.0",
115115
"codecov": "^3.6.5",
116116
"codemirror": "^5.52.0",

scripts/create-icons.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const BIconBlank = /*#__PURE__*/ makeIcon('Blank', '')
6363
6464
// --- Bootstrap Icons ---
6565
<% componentNames.forEach(component => { %>
66+
// eslint-disable-next-line
6667
export const <%= component %> = /*#__PURE__*/ makeIcon(
6768
'<%= icons[component].name %>',
6869
'<%= icons[component].content %>'

src/components/overlay/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ Place custom content in the overlay (replacing the default spinner) via the opti
277277
</b-card>
278278
<template v-slot:overlay>
279279
<div class="text-center">
280-
<b-icon icon="stopwatch" font-scale="3"></b-icon>
280+
<b-icon icon="stopwatch" font-scale="3" animation="cylon"></b-icon>
281281
<p id="cancel-label">Please wait...</p>
282282
<b-button
283283
ref="cancel"

src/icons/README.md

Lines changed: 54 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ BootstrapVue icon components are built from
99
are opt-in, meaning that they explicitly need to be imported in order to be used. They are not
1010
installed by default. You do not need `bootstrap-icons` as a dependency.
1111

12-
Icon components were added in BootstrapVue release `v2.2.0`.
12+
Icon components were added in BootstrapVue release `v2.2.0`. Bootstrap Icons `v1.0.0-alpha3` icons
13+
were added in BootstrapVue release `v2.8.0`.
1314

1415
<div class="alert alert-info small">
1516
<p class="mb-0">
@@ -24,7 +25,7 @@ Icon components were added in BootstrapVue release `v2.2.0`.
2425

2526
## Icons
2627

27-
The library includes over 300 icons. Use the explorer below to search and browse the available
28+
The library includes over 500 icons. Use the explorer below to search and browse the available
2829
icons.
2930

3031
<div>
@@ -166,7 +167,7 @@ of the icon names listed in the [Icons](#icons) section above.
166167
<template>
167168
<div class="h2 mb-0">
168169
<b-icon-arrow-up></b-icon-arrow-up>
169-
<b-icon-alert-triangle-fill></b-icon-alert-triangle-fill>
170+
<b-icon-exclamation-triangle-fill></b-icon-exclamation-triangle-fill>
170171
</div>
171172
</template>
172173

@@ -179,7 +180,7 @@ of the icon names listed in the [Icons](#icons) section above.
179180
<template>
180181
<div class="h2 mb-0">
181182
<b-icon icon="arrow-up"></b-icon>
182-
<b-icon icon="alert-triangle"></b-icon>
183+
<b-icon icon="exclamation-triangle"></b-icon>
183184
</div>
184185
</template>
185186

@@ -197,13 +198,13 @@ provide a `variant` prop to apply one of the Bootstrap contextual text variant c
197198
```html
198199
<template>
199200
<div class="h2 mb-0">
200-
<b-icon icon="alert-circle-fill" variant="success"></b-icon>
201-
<b-icon icon="alert-circle-fill" variant="warning"></b-icon>
202-
<b-icon icon="alert-circle-fill" variant="danger"></b-icon>
203-
<b-icon icon="alert-circle-fill" variant="info"></b-icon>
204-
<b-icon icon="alert-circle-fill" variant="primary"></b-icon>
205-
<b-icon icon="alert-circle-fill" variant="secondary"></b-icon>
206-
<b-icon icon="alert-circle-fill" variant="dark"></b-icon>
201+
<b-icon icon="exclamation-circle-fill" variant="success"></b-icon>
202+
<b-icon icon="exclamation-circle-fill" variant="warning"></b-icon>
203+
<b-icon icon="exclamation-circle-fill" variant="danger"></b-icon>
204+
<b-icon icon="exclamation-circle-fill" variant="info"></b-icon>
205+
<b-icon icon="exclamation-circle-fill" variant="primary"></b-icon>
206+
<b-icon icon="exclamation-circle-fill" variant="secondary"></b-icon>
207+
<b-icon icon="exclamation-circle-fill" variant="dark"></b-icon>
207208
</div>
208209
</template>
209210

@@ -234,11 +235,11 @@ current font size:
234235
```html
235236
<template>
236237
<div>
237-
<p class="h1 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
238-
<p class="h2 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
239-
<p class="h3 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
240-
<p class="h4 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
241-
<p class="h5 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
238+
<p class="h1 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
239+
<p class="h2 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
240+
<p class="h3 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
241+
<p class="h4 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
242+
<p class="h5 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
242243
</div>
243244
</template>
244245

@@ -251,7 +252,7 @@ classes:
251252
```html
252253
<template>
253254
<div>
254-
<b-icon icon="alert-circle" style="width: 120px; height: 120px;"></b-icon>
255+
<b-icon icon="exclamation-circle" style="width: 120px; height: 120px;"></b-icon>
255256
</div>
256257
</template>
257258

@@ -281,15 +282,15 @@ Also see the [scaling transforms](#scale) section below for additional sizing op
281282

282283
## Styling
283284

284-
With the use of Bootstrap's border and background
285+
With the use of Bootstrap's border, background and padding
285286
[utility classes](/docs/reference/utility-classes), you can create various styling effects:
286287

287288
```html
288289
<template>
289290
<div style="font-size: 4rem;">
290-
<b-icon icon="bell-fill" class="border rounded"></b-icon>
291-
<b-icon icon="bell-fill" class="border border-info rounded" variant="info"></b-icon>
292-
<b-icon icon="bell-fill" class="rounded-circle bg-danger p-1" variant="light"></b-icon>
291+
<b-icon icon="bell-fill" class="border rounded p-2"></b-icon>
292+
<b-icon icon="bell-fill" class="border border-info rounded p-2" variant="info"></b-icon>
293+
<b-icon icon="bell-fill" class="rounded-circle bg-danger p-2" variant="light"></b-icon>
293294
<b-icon icon="unlock-fill" class="rounded bg-primary p-1" variant="light"></b-icon>
294295
</div>
295296
</template>
@@ -351,16 +352,16 @@ but not its physical font size. To illustrate this we have added a background co
351352
<template>
352353
<b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
353354
<b-col class="mb-2">
354-
<b-icon icon="alert-circle" scale="0.5" class="bg-info"></b-icon>
355+
<b-icon icon="exclamation-circle" scale="0.5" class="bg-info"></b-icon>
355356
</b-col>
356357
<b-col class="mb-2">
357-
<b-icon icon="alert-circle" class="bg-info"></b-icon>
358+
<b-icon icon="exclamation-circle" class="bg-info"></b-icon>
358359
</b-col>
359360
<b-col class="mb-2">
360-
<b-icon icon="alert-circle" scale="1.5" class="bg-info"></b-icon>
361+
<b-icon icon="exclamation-circle" scale="1.5" class="bg-info"></b-icon>
361362
</b-col>
362363
<b-col class="mb-2">
363-
<b-icon icon="alert-circle" scale="2" class="bg-info"></b-icon>
364+
<b-icon icon="exclamation-circle" scale="2" class="bg-info"></b-icon>
364365
</b-col>
365366
</b-row>
366367
</template>
@@ -388,29 +389,29 @@ For clarity in the example, we’ve added a background color on the icon so you
388389
<template>
389390
<b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
390391
<b-col class="py-4 mb-2">
391-
<b-icon icon="alert-circle" class="bg-info"></b-icon>
392+
<b-icon icon="exclamation-circle" class="bg-info"></b-icon>
392393
</b-col>
393394
<b-col class="py-4 mb-2">
394-
<b-icon icon="alert-circle" shift-v="8" class="bg-info"></b-icon>
395+
<b-icon icon="exclamation-circle" shift-v="8" class="bg-info"></b-icon>
395396
</b-col>
396397
<b-col class="py-4 mb-2">
397-
<b-icon icon="alert-circle" shift-v="-8" class="bg-info"></b-icon>
398+
<b-icon icon="exclamation-circle" shift-v="-8" class="bg-info"></b-icon>
398399
</b-col>
399400
<b-col class="py-4 mb-2">
400-
<b-icon icon="alert-circle" shift-h="8" class="bg-info"></b-icon>
401+
<b-icon icon="exclamation-circle" shift-h="8" class="bg-info"></b-icon>
401402
</b-col>
402403
<b-col class="py-4 mb-2">
403-
<b-icon icon="alert-circle" shift-h="-8" class="bg-info"></b-icon>
404+
<b-icon icon="exclamation-circle" shift-h="-8" class="bg-info"></b-icon>
404405
</b-col>
405406
<b-col class="py-4 mb-2">
406-
<b-icon icon="alert-circle" shift-v="16" class="bg-info"></b-icon>
407+
<b-icon icon="exclamation-circle" shift-v="16" class="bg-info"></b-icon>
407408
</b-col>
408409
<b-col class="py-4 mb-2">
409-
<b-icon icon="alert-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
410+
<b-icon icon="exclamation-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
410411
</b-col>
411412
<b-col class="py-4 mb-2">
412413
<b-icon
413-
icon="alert-circle"
414+
icon="exclamation-circle"
414415
scale="0.5"
415416
rotate="45"
416417
shift-h="-4"
@@ -518,14 +519,14 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
518519
<template>
519520
<div>
520521
<b-iconstack font-scale="5">
521-
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
522-
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
522+
<b-icon stacked icon="camera" variant="info" scale="0.75"></b-icon>
523+
<b-icon stacked icon="slash-circle" variant="danger"></b-icon>
523524
</b-iconstack>
524525

525526
<b-iconstack font-scale="5" rotate="90">
526-
<b-icon stacked icon="chevron-right" shift-h="-3" variant="danger"></b-icon>
527+
<b-icon stacked icon="chevron-right" shift-h="-4" variant="danger"></b-icon>
527528
<b-icon stacked icon="chevron-right" shift-h="0" variant="success"></b-icon>
528-
<b-icon stacked icon="chevron-right" shift-h="3" variant="primary"></b-icon>
529+
<b-icon stacked icon="chevron-right" shift-h="4" variant="primary"></b-icon>
529530
</b-iconstack>
530531

531532
<b-iconstack font-scale="5">
@@ -536,10 +537,10 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
536537

537538
<b-iconstack font-scale="5" variant="white">
538539
<b-icon stacked icon="square-fill" variant="dark"></b-icon>
539-
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="-2.5"></b-icon>
540-
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="2.5" rotate="90"></b-icon>
541-
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="2.5" rotate="180"></b-icon>
542-
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="-2.5" rotate="270"></b-icon>
540+
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="-3"></b-icon>
541+
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="3" rotate="90"></b-icon>
542+
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="3" rotate="180"></b-icon>
543+
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="-3" rotate="270"></b-icon>
543544
</b-iconstack>
544545

545546
<b-iconstack font-scale="5">
@@ -549,12 +550,12 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
549550

550551
<b-iconstack font-scale="5">
551552
<b-icon stacked icon="square"></b-icon>
552-
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="3"></b-icon>
553-
<b-icon stacked icon="dot" shift-h="-2.25"></b-icon>
554-
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="-3"></b-icon>
555-
<b-icon stacked icon="dot" shift-h="2.25" shift-v="3"></b-icon>
556-
<b-icon stacked icon="dot" shift-h="2.25"></b-icon>
557-
<b-icon stacked icon="dot" shift-h="2.25" shift-v="-3"></b-icon>
553+
<b-icon stacked icon="dot" shift-h="-3" shift-v="4"></b-icon>
554+
<b-icon stacked icon="dot" shift-h="-3"></b-icon>
555+
<b-icon stacked icon="dot" shift-h="-3" shift-v="-4"></b-icon>
556+
<b-icon stacked icon="dot" shift-h="3" shift-v="4"></b-icon>
557+
<b-icon stacked icon="dot" shift-h="3"></b-icon>
558+
<b-icon stacked icon="dot" shift-h="3" shift-v="-4"></b-icon>
558559
</b-iconstack>
559560
</div>
560561
</template>
@@ -581,7 +582,7 @@ The `<b-iconstack>` component supports the same animations as individual icons:
581582
<div>
582583
<b-iconstack font-scale="5" animation="spin">
583584
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
584-
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
585+
<b-icon stacked icon="slash-circle" variant="danger"></b-icon>
585586
</b-iconstack>
586587
</div>
587588
</template>
@@ -604,7 +605,7 @@ Individual icons within the icon stack can also be animated (except on IE 11):
604605
></b-icon>
605606
<b-icon
606607
stacked
607-
icon="circle-slash"
608+
icon="slash-circle"
608609
animation="spin-reverse"
609610
variant="danger"
610611
></b-icon>
@@ -651,7 +652,7 @@ font scaled by 125%).
651652
</b-button>
652653
<br>
653654
<b-button size="lg" variant="primary" class="mb-2">
654-
<b-icon icon="question-fill" aria-hidden="true"></b-icon>
655+
<b-icon icon="question-circle-fill" aria-hidden="true"></b-icon>
655656
<span class="sr-only">Help</span>
656657
</b-button>
657658
</div>
@@ -698,7 +699,7 @@ font scaled by 125%).
698699
<b-icon icon="cloud-download" aria-hidden="true"></b-icon>
699700
</b-button>
700701
<b-button title="New document">
701-
<b-icon icon="document" aria-hidden="true"></b-icon>
702+
<b-icon icon="file-earmark" aria-hidden="true"></b-icon>
702703
</b-button>
703704
</b-button-group>
704705
<b-button-group class="mr-1">
@@ -783,11 +784,11 @@ font scaled by 125%).
783784
Cras justo odio
784785
</b-list-group-item>
785786
<b-list-group-item class="d-flex justify-content-between align-items-center">
786-
<b-icon icon="alert-triangle-fill" scale="2" variant="warning"></b-icon>
787+
<b-icon icon="exclamation-triangle-fill" scale="2" variant="warning"></b-icon>
787788
Dapibus ac facilisis in
788789
</b-list-group-item>
789790
<b-list-group-item class="d-flex justify-content-between align-items-center">
790-
<b-icon icon="info-fill" scale="2" variant="info"></b-icon>
791+
<b-icon icon="info-circle-fill" scale="2" variant="info"></b-icon>
791792
Morbi leo risus
792793
</b-list-group-item>
793794
<b-list-group-item class="d-flex justify-content-between align-items-center">

src/icons/_icons.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
overflow: visible;
66
// The following is required to compensate for alignment
77
// issues with the Bootstrap Icons alpha implementation
8-
// TODO: Is this "hack" still required?
98
vertical-align: $b-icon-vertical-offset;
109
}
1110

0 commit comments

Comments
 (0)