@@ -9,7 +9,8 @@ BootstrapVue icon components are built from
9
9
are opt-in, meaning that they explicitly need to be imported in order to be used. They are not
10
10
installed by default. You do not need ` bootstrap-icons ` as a dependency.
11
11
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 ` .
13
14
14
15
<div class =" alert alert-info small " >
15
16
<p class =" mb-0 " >
@@ -24,7 +25,7 @@ Icon components were added in BootstrapVue release `v2.2.0`.
24
25
25
26
## Icons
26
27
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
28
29
icons.
29
30
30
31
<div >
@@ -166,7 +167,7 @@ of the icon names listed in the [Icons](#icons) section above.
166
167
<template >
167
168
<div class =" h2 mb-0" >
168
169
<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 >
170
171
</div >
171
172
</template >
172
173
@@ -179,7 +180,7 @@ of the icon names listed in the [Icons](#icons) section above.
179
180
<template >
180
181
<div class =" h2 mb-0" >
181
182
<b-icon icon =" arrow-up" ></b-icon >
182
- <b-icon icon =" alert -triangle" ></b-icon >
183
+ <b-icon icon =" exclamation -triangle" ></b-icon >
183
184
</div >
184
185
</template >
185
186
@@ -197,13 +198,13 @@ provide a `variant` prop to apply one of the Bootstrap contextual text variant c
197
198
``` html
198
199
<template >
199
200
<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 >
207
208
</div >
208
209
</template >
209
210
@@ -234,11 +235,11 @@ current font size:
234
235
``` html
235
236
<template >
236
237
<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 >
242
243
</div >
243
244
</template >
244
245
@@ -251,7 +252,7 @@ classes:
251
252
``` html
252
253
<template >
253
254
<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 >
255
256
</div >
256
257
</template >
257
258
@@ -281,15 +282,15 @@ Also see the [scaling transforms](#scale) section below for additional sizing op
281
282
282
283
## Styling
283
284
284
- With the use of Bootstrap's border and background
285
+ With the use of Bootstrap's border, background and padding
285
286
[ utility classes] ( /docs/reference/utility-classes ) , you can create various styling effects:
286
287
287
288
``` html
288
289
<template >
289
290
<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 >
293
294
<b-icon icon =" unlock-fill" class =" rounded bg-primary p-1" variant =" light" ></b-icon >
294
295
</div >
295
296
</template >
@@ -351,16 +352,16 @@ but not its physical font size. To illustrate this we have added a background co
351
352
<template >
352
353
<b-row cols =" 2" cols-sm =" 4" class =" text-center" style =" font-size : 4rem ;" >
353
354
<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 >
355
356
</b-col >
356
357
<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 >
358
359
</b-col >
359
360
<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 >
361
362
</b-col >
362
363
<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 >
364
365
</b-col >
365
366
</b-row >
366
367
</template >
@@ -388,29 +389,29 @@ For clarity in the example, we’ve added a background color on the icon so you
388
389
<template >
389
390
<b-row cols =" 2" cols-sm =" 4" class =" text-center" style =" font-size : 4rem ;" >
390
391
<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 >
392
393
</b-col >
393
394
<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 >
395
396
</b-col >
396
397
<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 >
398
399
</b-col >
399
400
<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 >
401
402
</b-col >
402
403
<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 >
404
405
</b-col >
405
406
<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 >
407
408
</b-col >
408
409
<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 >
410
411
</b-col >
411
412
<b-col class =" py-4 mb-2" >
412
413
<b-icon
413
- icon =" alert -circle"
414
+ icon =" exclamation -circle"
414
415
scale =" 0.5"
415
416
rotate =" 45"
416
417
shift-h =" -4"
@@ -518,14 +519,14 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
518
519
<template >
519
520
<div >
520
521
<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 >
523
524
</b-iconstack >
524
525
525
526
<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 >
527
528
<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 >
529
530
</b-iconstack >
530
531
531
532
<b-iconstack font-scale =" 5" >
@@ -536,10 +537,10 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
536
537
537
538
<b-iconstack font-scale =" 5" variant =" white" >
538
539
<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 >
543
544
</b-iconstack >
544
545
545
546
<b-iconstack font-scale =" 5" >
@@ -549,12 +550,12 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
549
550
550
551
<b-iconstack font-scale =" 5" >
551
552
<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 >
558
559
</b-iconstack >
559
560
</div >
560
561
</template >
@@ -581,7 +582,7 @@ The `<b-iconstack>` component supports the same animations as individual icons:
581
582
<div >
582
583
<b-iconstack font-scale =" 5" animation =" spin" >
583
584
<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 >
585
586
</b-iconstack >
586
587
</div >
587
588
</template >
@@ -604,7 +605,7 @@ Individual icons within the icon stack can also be animated (except on IE 11):
604
605
></b-icon >
605
606
<b-icon
606
607
stacked
607
- icon =" circle- slash"
608
+ icon =" slash-circle "
608
609
animation =" spin-reverse"
609
610
variant =" danger"
610
611
></b-icon >
@@ -651,7 +652,7 @@ font scaled by 125%).
651
652
</b-button >
652
653
<br >
653
654
<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 >
655
656
<span class =" sr-only" >Help</span >
656
657
</b-button >
657
658
</div >
@@ -698,7 +699,7 @@ font scaled by 125%).
698
699
<b-icon icon =" cloud-download" aria-hidden =" true" ></b-icon >
699
700
</b-button >
700
701
<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 >
702
703
</b-button >
703
704
</b-button-group >
704
705
<b-button-group class =" mr-1" >
@@ -783,11 +784,11 @@ font scaled by 125%).
783
784
Cras justo odio
784
785
</b-list-group-item >
785
786
<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 >
787
788
Dapibus ac facilisis in
788
789
</b-list-group-item >
789
790
<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 >
791
792
Morbi leo risus
792
793
</b-list-group-item >
793
794
<b-list-group-item class =" d-flex justify-content-between align-items-center" >
0 commit comments