🌐 AI搜索 & 代理 主页
Skip to content

feat: upgrade to bootstrap icons alpha 3 #4966

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tmorehouse merged 27 commits into from
Mar 19, 2020
Merged

feat: upgrade to bootstrap icons alpha 3 #4966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
821e4ca
chore(icons): prep for bootstrap icons alpha 3
tmorehouse Mar 19, 2020
64f5080
Update icons.spec.js
tmorehouse Mar 19, 2020
d08ae82
Update iconstack.spec.js
tmorehouse Mar 19, 2020
fc942a7
Update README.md
tmorehouse Mar 19, 2020
cd48945
Update README.md
tmorehouse Mar 19, 2020
ceaea7e
Update index.vue
tmorehouse Mar 19, 2020
e480acb
Update _icons.scss
tmorehouse Mar 19, 2020
bdf497a
feat: update devdependency bootstrap-icons to ^1.0.0-alpha3 (#4968)
renovate[bot] Mar 19, 2020
45a328c
Add files via upload
tmorehouse Mar 19, 2020
ce5ef3e
Update icons.spec.js
tmorehouse Mar 19, 2020
56665d3
Update .prettierignore
tmorehouse Mar 19, 2020
1140b31
Merge branch 'dev' into icons-alpha-3
tmorehouse Mar 19, 2020
e5ecf2f
Update create-icons.js
tmorehouse Mar 19, 2020
3de47e7
Update create-icons.js
tmorehouse Mar 19, 2020
48fe77c
update auto generated files
tmorehouse Mar 19, 2020
e2bf6e1
Update icons-table.vue
tmorehouse Mar 19, 2020
4702a94
Update icons-table.vue
tmorehouse Mar 19, 2020
ccac724
Update README.md
tmorehouse Mar 19, 2020
49f0933
Update README.md
tmorehouse Mar 19, 2020
381ec32
Update icon-base.js
tmorehouse Mar 19, 2020
8f6a02b
Update icons.spec.js
tmorehouse Mar 19, 2020
2f330c3
Update _icons.scss
tmorehouse Mar 19, 2020
a61ed11
Update iconstack.spec.js
tmorehouse Mar 19, 2020
a3bea02
Update README.md
tmorehouse Mar 19, 2020
fc8eba5
Update index.vue
tmorehouse Mar 19, 2020
b1f9e6a
Update README.md
tmorehouse Mar 19, 2020
c49641e
Update README.md
tmorehouse Mar 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ node_modules/
nuxt/plugin.template.js
nuxt/plugin.prod.js
nuxt/plugin.dev.js
src/icons/icons.js
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<br>

<p align="center">
BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 300 icons,
BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 500 icons,
provides one of the most comprehensive implementations of the Bootstrap v4 component and grid
system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup.
</p>
Expand Down
4 changes: 2 additions & 2 deletions docs/components/icons-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
}

#bv-icons-table-result /deep/ .bi {
font-size: 2rem;
font-size: 1.5rem;
}

.form-group /deep/ .form-text {
Expand All @@ -94,7 +94,7 @@
}

&:hover .bi {
transform: scale(2);
transform: scale(1.75);
}
}

Expand Down
4 changes: 2 additions & 2 deletions docs/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
<b-row class="mb-4">
<b-col lg="10" offset-lg="1">
<p class="text-lg-center">
With more than 85 components, over 45 available plugins, several directives, and 300+ icons,
With more than 85 components, over 45 available plugins, several directives, and 500+ icons,
<span class="bd-text-purple-bright">BootstrapVue</span> provides one of the most
comprehensive implementations of the
<span class="bd-text-purple-bright">Bootstrap v{{ bootstrapVersionMinor }}</span> component and grid system
Expand Down Expand Up @@ -208,7 +208,7 @@

<b-card tag="article" body-text-variant="muted" class="rounded-0 border-0">
<b-card-text text-tag="h3" class="h5 text-center bd-text-purple-bright mb-2">
<b-icon icon="columns-gutters" width="2.5em" height="2.5em" class="mx-auto d-block mb-3"></b-icon>
<b-icon icon="columns-gap" width="2.5em" height="2.5em" class="mx-auto d-block mb-3"></b-icon>
<span>Modular</span>
</b-card-text>
<b-card-text class="text-center">
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
"babel-eslint": "^10.1.0",
"babel-jest": "^25.1.0",
"babel-plugin-istanbul": "^6.0.0",
"bootstrap-icons": "^1.0.0-alpha2",
"bootstrap-icons": "^1.0.0-alpha3",
"clean-css-cli": "^4.3.0",
"codecov": "^3.6.5",
"codemirror": "^5.52.0",
Expand Down
1 change: 1 addition & 0 deletions scripts/create-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export const BIconBlank = /*#__PURE__*/ makeIcon('Blank', '')

// --- Bootstrap Icons ---
<% componentNames.forEach(component => { %>
// eslint-disable-next-line
export const <%= component %> = /*#__PURE__*/ makeIcon(
'<%= icons[component].name %>',
'<%= icons[component].content %>'
Expand Down
2 changes: 1 addition & 1 deletion src/components/overlay/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ Place custom content in the overlay (replacing the default spinner) via the opti
</b-card>
<template v-slot:overlay>
<div class="text-center">
<b-icon icon="stopwatch" font-scale="3"></b-icon>
<b-icon icon="stopwatch" font-scale="3" animation="cylon"></b-icon>
<p id="cancel-label">Please wait...</p>
<b-button
ref="cancel"
Expand Down
107 changes: 54 additions & 53 deletions src/icons/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ BootstrapVue icon components are built from
are opt-in, meaning that they explicitly need to be imported in order to be used. They are not
installed by default. You do not need `bootstrap-icons` as a dependency.

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

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

## Icons

The library includes over 300 icons. Use the explorer below to search and browse the available
The library includes over 500 icons. Use the explorer below to search and browse the available
icons.

<div>
Expand Down Expand Up @@ -166,7 +167,7 @@ of the icon names listed in the [Icons](#icons) section above.
<template>
<div class="h2 mb-0">
<b-icon-arrow-up></b-icon-arrow-up>
<b-icon-alert-triangle-fill></b-icon-alert-triangle-fill>
<b-icon-exclamation-triangle-fill></b-icon-exclamation-triangle-fill>
</div>
</template>

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

Expand All @@ -197,13 +198,13 @@ provide a `variant` prop to apply one of the Bootstrap contextual text variant c
```html
<template>
<div class="h2 mb-0">
<b-icon icon="alert-circle-fill" variant="success"></b-icon>
<b-icon icon="alert-circle-fill" variant="warning"></b-icon>
<b-icon icon="alert-circle-fill" variant="danger"></b-icon>
<b-icon icon="alert-circle-fill" variant="info"></b-icon>
<b-icon icon="alert-circle-fill" variant="primary"></b-icon>
<b-icon icon="alert-circle-fill" variant="secondary"></b-icon>
<b-icon icon="alert-circle-fill" variant="dark"></b-icon>
<b-icon icon="exclamation-circle-fill" variant="success"></b-icon>
<b-icon icon="exclamation-circle-fill" variant="warning"></b-icon>
<b-icon icon="exclamation-circle-fill" variant="danger"></b-icon>
<b-icon icon="exclamation-circle-fill" variant="info"></b-icon>
<b-icon icon="exclamation-circle-fill" variant="primary"></b-icon>
<b-icon icon="exclamation-circle-fill" variant="secondary"></b-icon>
<b-icon icon="exclamation-circle-fill" variant="dark"></b-icon>
</div>
</template>

Expand Down Expand Up @@ -234,11 +235,11 @@ current font size:
```html
<template>
<div>
<p class="h1 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
<p class="h2 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
<p class="h3 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
<p class="h4 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
<p class="h5 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
<p class="h1 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
<p class="h2 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
<p class="h3 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
<p class="h4 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
<p class="h5 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
</div>
</template>

Expand All @@ -251,7 +252,7 @@ classes:
```html
<template>
<div>
<b-icon icon="alert-circle" style="width: 120px; height: 120px;"></b-icon>
<b-icon icon="exclamation-circle" style="width: 120px; height: 120px;"></b-icon>
</div>
</template>

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

## Styling

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

```html
<template>
<div style="font-size: 4rem;">
<b-icon icon="bell-fill" class="border rounded"></b-icon>
<b-icon icon="bell-fill" class="border border-info rounded" variant="info"></b-icon>
<b-icon icon="bell-fill" class="rounded-circle bg-danger p-1" variant="light"></b-icon>
<b-icon icon="bell-fill" class="border rounded p-2"></b-icon>
<b-icon icon="bell-fill" class="border border-info rounded p-2" variant="info"></b-icon>
<b-icon icon="bell-fill" class="rounded-circle bg-danger p-2" variant="light"></b-icon>
<b-icon icon="unlock-fill" class="rounded bg-primary p-1" variant="light"></b-icon>
</div>
</template>
Expand Down Expand Up @@ -351,16 +352,16 @@ but not its physical font size. To illustrate this we have added a background co
<template>
<b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
<b-col class="mb-2">
<b-icon icon="alert-circle" scale="0.5" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" scale="0.5" class="bg-info"></b-icon>
</b-col>
<b-col class="mb-2">
<b-icon icon="alert-circle" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" class="bg-info"></b-icon>
</b-col>
<b-col class="mb-2">
<b-icon icon="alert-circle" scale="1.5" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" scale="1.5" class="bg-info"></b-icon>
</b-col>
<b-col class="mb-2">
<b-icon icon="alert-circle" scale="2" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" scale="2" class="bg-info"></b-icon>
</b-col>
</b-row>
</template>
Expand Down Expand Up @@ -388,29 +389,29 @@ For clarity in the example, we’ve added a background color on the icon so you
<template>
<b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
<b-col class="py-4 mb-2">
<b-icon icon="alert-circle" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" class="bg-info"></b-icon>
</b-col>
<b-col class="py-4 mb-2">
<b-icon icon="alert-circle" shift-v="8" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" shift-v="8" class="bg-info"></b-icon>
</b-col>
<b-col class="py-4 mb-2">
<b-icon icon="alert-circle" shift-v="-8" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" shift-v="-8" class="bg-info"></b-icon>
</b-col>
<b-col class="py-4 mb-2">
<b-icon icon="alert-circle" shift-h="8" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" shift-h="8" class="bg-info"></b-icon>
</b-col>
<b-col class="py-4 mb-2">
<b-icon icon="alert-circle" shift-h="-8" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" shift-h="-8" class="bg-info"></b-icon>
</b-col>
<b-col class="py-4 mb-2">
<b-icon icon="alert-circle" shift-v="16" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" shift-v="16" class="bg-info"></b-icon>
</b-col>
<b-col class="py-4 mb-2">
<b-icon icon="alert-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
<b-icon icon="exclamation-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
</b-col>
<b-col class="py-4 mb-2">
<b-icon
icon="alert-circle"
icon="exclamation-circle"
scale="0.5"
rotate="45"
shift-h="-4"
Expand Down Expand Up @@ -518,14 +519,14 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
<template>
<div>
<b-iconstack font-scale="5">
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
<b-icon stacked icon="camera" variant="info" scale="0.75"></b-icon>
<b-icon stacked icon="slash-circle" variant="danger"></b-icon>
</b-iconstack>

<b-iconstack font-scale="5" rotate="90">
<b-icon stacked icon="chevron-right" shift-h="-3" variant="danger"></b-icon>
<b-icon stacked icon="chevron-right" shift-h="-4" variant="danger"></b-icon>
<b-icon stacked icon="chevron-right" shift-h="0" variant="success"></b-icon>
<b-icon stacked icon="chevron-right" shift-h="3" variant="primary"></b-icon>
<b-icon stacked icon="chevron-right" shift-h="4" variant="primary"></b-icon>
</b-iconstack>

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

<b-iconstack font-scale="5" variant="white">
<b-icon stacked icon="square-fill" variant="dark"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="-2.5"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="2.5" rotate="90"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="2.5" rotate="180"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="-2.5" rotate="270"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="-3"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="3" rotate="90"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="3" rotate="180"></b-icon>
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="-3" rotate="270"></b-icon>
</b-iconstack>

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

<b-iconstack font-scale="5">
<b-icon stacked icon="square"></b-icon>
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="3"></b-icon>
<b-icon stacked icon="dot" shift-h="-2.25"></b-icon>
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="-3"></b-icon>
<b-icon stacked icon="dot" shift-h="2.25" shift-v="3"></b-icon>
<b-icon stacked icon="dot" shift-h="2.25"></b-icon>
<b-icon stacked icon="dot" shift-h="2.25" shift-v="-3"></b-icon>
<b-icon stacked icon="dot" shift-h="-3" shift-v="4"></b-icon>
<b-icon stacked icon="dot" shift-h="-3"></b-icon>
<b-icon stacked icon="dot" shift-h="-3" shift-v="-4"></b-icon>
<b-icon stacked icon="dot" shift-h="3" shift-v="4"></b-icon>
<b-icon stacked icon="dot" shift-h="3"></b-icon>
<b-icon stacked icon="dot" shift-h="3" shift-v="-4"></b-icon>
</b-iconstack>
</div>
</template>
Expand All @@ -581,7 +582,7 @@ The `<b-iconstack>` component supports the same animations as individual icons:
<div>
<b-iconstack font-scale="5" animation="spin">
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
<b-icon stacked icon="slash-circle" variant="danger"></b-icon>
</b-iconstack>
</div>
</template>
Expand All @@ -604,7 +605,7 @@ Individual icons within the icon stack can also be animated (except on IE 11):
></b-icon>
<b-icon
stacked
icon="circle-slash"
icon="slash-circle"
animation="spin-reverse"
variant="danger"
></b-icon>
Expand Down Expand Up @@ -651,7 +652,7 @@ font scaled by 125%).
</b-button>
<br>
<b-button size="lg" variant="primary" class="mb-2">
<b-icon icon="question-fill" aria-hidden="true"></b-icon>
<b-icon icon="question-circle-fill" aria-hidden="true"></b-icon>
<span class="sr-only">Help</span>
</b-button>
</div>
Expand Down Expand Up @@ -698,7 +699,7 @@ font scaled by 125%).
<b-icon icon="cloud-download" aria-hidden="true"></b-icon>
</b-button>
<b-button title="New document">
<b-icon icon="document" aria-hidden="true"></b-icon>
<b-icon icon="file-earmark" aria-hidden="true"></b-icon>
</b-button>
</b-button-group>
<b-button-group class="mr-1">
Expand Down Expand Up @@ -783,11 +784,11 @@ font scaled by 125%).
Cras justo odio
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
<b-icon icon="alert-triangle-fill" scale="2" variant="warning"></b-icon>
<b-icon icon="exclamation-triangle-fill" scale="2" variant="warning"></b-icon>
Dapibus ac facilisis in
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
<b-icon icon="info-fill" scale="2" variant="info"></b-icon>
<b-icon icon="info-circle-fill" scale="2" variant="info"></b-icon>
Morbi leo risus
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
Expand Down
1 change: 0 additions & 1 deletion src/icons/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
overflow: visible;
// The following is required to compensate for alignment
// issues with the Bootstrap Icons alpha implementation
// TODO: Is this "hack" still required?
vertical-align: $b-icon-vertical-offset;
}

Expand Down
Loading