+1922
-75
lines changedFilter options
+1922
-75
lines changed Original file line number Diff line number Diff line change
@@ -10,14 +10,21 @@ export const directives = importAll(directivesContext)
10 10 11 11
const iconsContext = require.context('~/../src/icons', false, /package.json/)
12 12
const icons = importAll(iconsContext) || {}
13 -
// Since there are over 300 icons, we only return the first BIcon component, plus one
14 -
// extra example icon component which we modify the icon name to be `BIcon{IconName}`
13 +
// Since there are over 300 icons, we only return `BIcon` and `BIconstack` component, plus
14 +
// one extra example icon component which we modify the icon name to be `BIcon{IconName}`
15 15
// We sort the array to ensure `BIcon` appears first
16 16
icons[''].components = icons[''].components
17 -
.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
18 -
.slice(0, 2)
19 -
.map(c => ({ ...c }))
20 -
icons[''].components[1].component = 'BIcon{IconName}'
17 +
.filter(c => c.component === 'BIconBlank' || !/^BIcon[A-Z]/.test(c.component))
18 +
.sort((a, b) => (a.component < b.component ? -1 : a.component > b.component ? 1 : 0))
19 +
.map(c => {
20 +
c = { ...c }
21 +
if (c.component === 'BIconBlank') {
22 +
c.component = 'BIcon{IconName}'
23 +
// We add a special `srcComponent` to grab the prop `$options` data from
24 +
c.srcComponent = 'BIconBlank'
25 +
}
26 +
return c
27 +
})
21 28
export { icons }
22 29 23 30
const referenceContext = require.context('~/markdown/reference', true, /meta.json/)
@@ -61,12 +61,10 @@ export default {
61 61
computed: {
62 62
componentMeta() {
63 63
// `docs/content/index.js` massages the list of icon components
64 -
// to include only `BIcon` and an example component
65 -
const components = this.meta.components
66 -
// Add in a special property or grabbing the component props
67 -
// as `BIcon{IconName}` doesn't exist
68 -
components[1].srcComponent = 'BIconBlank'
69 -
return components
64 +
// to include only `BIcon`, `BIconstack` and an example component
65 +
// The example icon has a special `srcComponent` property that lists
66 +
// `BIconBlank` as the component to grab the `$options.props` from
67 +
return this.meta.components
70 68
},
71 69
importMeta() {
72 70
return { ...this.meta, slug: 'icons', components: this.componentMeta }
@@ -45,8 +45,8 @@ const iconsTemplateFn = _template(`// --- BEGIN AUTO-GENERATED FILE ---
45 45
// @IconsVersion: <%= version %>
46 46
// @Generated: <%= created %>
47 47
//
48 -
// This file is generated on each build. Do not edit this file.
49 -
//
48 +
// This file is generated on each build. Do not edit this file!
49 + 50 50
/*!
51 51
* BootstrapVue Icons, generated from Bootstrap Icons <%= version %>
52 52
*
@@ -77,14 +77,16 @@ const pluginTemplateFn = _template(`// --- BEGIN AUTO-GENERATED FILE ---
77 77
// @IconsVersion: <%= version %>
78 78
// @Generated: <%= created %>
79 79
//
80 -
// This file is generated on each build. Do not edit this file.
81 -
//
80 +
// This file is generated on each build. Do not edit this file!
82 81 83 82
import { pluginFactoryNoConfig } from '../utils/plugins'
84 83 85 84
// Icon helper component
86 85
import { BIcon } from './icon'
87 86 87 +
// Icon stacking component
88 +
import { BIconstack } from './iconstack'
89 + 88 90
import {
89 91
// BootstrapVue custom icons
90 92
BIconBlank,
@@ -105,6 +107,8 @@ export const IconsPlugin = /*#__PURE__*/ pluginFactoryNoConfig({
105 107
components: {
106 108
// Icon helper component
107 109
BIcon,
110 +
// Icon stacking component
111 +
BIconstack,
108 112
// BootstrapVue custom icon components
109 113
BIconBlank,
110 114
// Bootstrap icon components
@@ -128,8 +132,7 @@ const typesTemplateFn = _template(`// --- BEGIN AUTO-GENERATED FILE ---
128 132
// @IconsVersion: <%= version %>
129 133
// @Generated: <%= created %>
130 134
//
131 -
// This file is generated on each build. Do not edit this file.
132 -
//
135 +
// This file is generated on each build. Do not edit this file!
133 136 134 137
import Vue from 'vue'
135 138
import { BvComponent } from '../'
@@ -29,7 +29,7 @@ icons.
29 29 30 30
<div>
31 31
<!-- Component rendered by docs/pages/docs/icons.index.js -->
32 -
<!-- We use a `<div is="...">` to prevent marked loader from mangling the unknown tag-->
32 +
<!-- We use a `<div is="...">` to prevent marked loader from mangling the unknown tag -->
33 33
<div is="IconsTable"></div>
34 34
</div>
35 35
@@ -428,6 +428,71 @@ Shifting is applied after any rotation transforms. As with scaling, backgrounds
428 428
affected. If you need to shift the border/background with the icon, use Bootstrap's margin
429 429
[spacing utility classes](/docs/reference/utility-classes).
430 430 431 +
## Stacking icons
432 + 433 +
<span class="badge badge-info small">v2.3.0+</span>
434 + 435 +
Combine icons together via the use of the component `<b-iconstack>` and the `stacked` prop on
436 +
individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
437 + 438 +
```html
439 +
<template>
440 +
<div>
441 +
<b-iconstack font-scale="5">
442 +
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
443 +
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
444 +
</b-iconstack>
445 + 446 +
<b-iconstack font-scale="5" rotate="90">
447 +
<b-icon stacked icon="chevron-right" shift-h="-3" variant="danger"></b-icon>
448 +
<b-icon stacked icon="chevron-right" shift-h="0" variant="success"></b-icon>
449 +
<b-icon stacked icon="chevron-right" shift-h="3" variant="primary"></b-icon>
450 +
</b-iconstack>
451 + 452 +
<b-iconstack font-scale="5">
453 +
<b-icon stacked icon="circle-fill" variant="info"></b-icon>
454 +
<b-icon stacked icon="bell-fill" scale="0.5" variant="white"></b-icon>
455 +
<b-icon stacked icon="circle" variant="danger"></b-icon>
456 +
</b-iconstack>
457 + 458 +
<b-iconstack font-scale="5" variant="white">
459 +
<b-icon stacked icon="square-fill" variant="dark"></b-icon>
460 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="-2.5"></b-icon>
461 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="2.5" rotate="90"></b-icon>
462 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="2.5" rotate="180"></b-icon>
463 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="-2.5" rotate="270"></b-icon>
464 +
</b-iconstack>
465 + 466 +
<b-iconstack font-scale="5">
467 +
<b-icon stacked icon="square"></b-icon>
468 +
<b-icon stacked icon="check"></b-icon>
469 +
</b-iconstack>
470 + 471 +
<b-iconstack font-scale="5">
472 +
<b-icon stacked icon="square"></b-icon>
473 +
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="3"></b-icon>
474 +
<b-icon stacked icon="dot" shift-h="-2.25"></b-icon>
475 +
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="-3"></b-icon>
476 +
<b-icon stacked icon="dot" shift-h="2.25" shift-v="3"></b-icon>
477 +
<b-icon stacked icon="dot" shift-h="2.25"></b-icon>
478 +
<b-icon stacked icon="dot" shift-h="2.25" shift-v="-3"></b-icon>
479 +
</b-iconstack>
480 +
</div>
481 +
</template>
482 + 483 +
<!-- icons-stacking.vue -->
484 +
```
485 + 486 +
`<b-iconstack>` supports the same `variant`, `font-size`, and transformation props available on
487 +
individual icons.
488 + 489 +
Stacked icon notes:
490 + 491 +
- Remember to set the `stacked` prop on the inner icon components
492 +
- The `font-scale` prop cannot be used on the inner icon components
493 +
- The `width` and `height` attributes cannot be applied to the inner icon components
494 +
- Stacked icons **cannot** be stacked inside another `<b-iconstack>`
495 + 431 496
## Using in components
432 497 433 498
Easily place icons as content in other components.
@@ -1,8 +1,9 @@
1 1
import Vue from '../../utils/vue'
2 2
import { mergeData } from 'vue-functional-data-merge'
3 3
import identity from '../../utils/identity'
4 -
import { kebabCase, pascalCase, trim } from '../../utils/string'
4 +
import { isUndefinedOrNull } from '../../utils/inspect'
5 5
import { toFloat } from '../../utils/number'
6 +
import { kebabCase, pascalCase, trim } from '../../utils/string'
6 7 7 8
// Common icon props (should be cloned/spread before using)
8 9
export const commonIconProps = {
@@ -52,28 +53,32 @@ const baseAttrs = {
52 53 53 54
// Shared private base component to reduce bundle/runtime size
54 55
// @vue/component
55 -
const BVIconBase = {
56 +
export const BVIconBase = /*#__PURE__*/ Vue.extend({
56 57
name: 'BVIconBase',
57 58
functional: true,
58 59
props: {
59 60
content: {
60 61
type: String
61 62
},
63 +
stacked: {
64 +
type: Boolean,
65 +
default: false
66 +
},
62 67
...commonIconProps
63 68
},
64 -
render(h, { data, props }) {
69 +
render(h, { data, props, children }) {
65 70
const fontScale = Math.max(toFloat(props.fontScale) || 1, 0) || 1
66 71
const scale = Math.max(toFloat(props.scale) || 1, 0) || 1
67 72
const rotate = toFloat(props.rotate) || 0
68 73
const shiftH = toFloat(props.shiftH) || 0
69 74
const shiftV = toFloat(props.shiftV) || 0
70 75
const flipH = props.flipH
71 76
const flipV = props.flipV
72 -
// Compute the transforms. Note that order is important as
73 -
// SVG transforms are applied in order from left to right
74 -
// and we want flipping/scale to occur before rotation.
75 -
// Note shifting is applied separately. Assumes that the
76 -
// viewbox is `0 0 20 20` (`10 10` is the center)
77 +
// Compute the transforms
78 +
// Note that order is important as SVG transforms are applied in order from
79 +
// left to right and we want flipping/scale to occur before rotation
80 +
// Note shifting is applied separately
81 +
// Assumes that the viewbox is `0 0 20 20` (`10 10` is the center)
77 82
const hasScale = flipH || flipV || scale !== 1
78 83
const hasTransforms = hasScale || rotate
79 84
const hasShift = shiftH || shiftV
@@ -84,11 +89,19 @@ const BVIconBase = {
84 89
hasTransforms ? 'translate(-10 -10)' : null
85 90
].filter(identity)
86 91 92 +
// Handling stacked icons
93 +
const isStacked = props.stacked
94 +
const hasContent = !isUndefinedOrNull(props.content)
95 + 87 96
// We wrap the content in a `<g>` for handling the transforms (except shift)
88 -
let $inner = h('g', {
89 -
attrs: { transform: transforms.join(' ') || null },
90 -
domProps: { innerHTML: props.content || '' }
91 -
})
97 +
let $inner = h(
98 +
'g',
99 +
{
100 +
attrs: { transform: transforms.join(' ') || null },
101 +
domProps: hasContent ? { innerHTML: props.content || '' } : {}
102 +
},
103 +
children
104 +
)
92 105 93 106
// If needed, we wrap in an additional `<g>` in order to handle the shifting
94 107
if (hasShift) {
@@ -103,28 +116,33 @@ const BVIconBase = {
103 116
'svg',
104 117
mergeData(
105 118
{
119 +
staticClass: 'b-icon bi',
106 120
class: { [`text-${props.variant}`]: !!props.variant },
107 121
attrs: baseAttrs,
108 -
style: { fontSize: fontScale === 1 ? null : `${fontScale * 100}%` }
122 +
style: isStacked ? {} : { fontSize: fontScale === 1 ? null : `${fontScale * 100}%` }
109 123
},
110 124
// Merge in user supplied data
111 125
data,
126 +
// If icon is stacked, null out some attrs
127 +
isStacked ? { attrs: { width: null, height: null, role: null, alt: null } } : {},
112 128
// These cannot be overridden by users
113 129
{
114 -
staticClass: 'b-icon bi',
115 -
attrs: { xmlns: 'http://www.w3.org/2000/svg', fill: 'currentColor' }
130 +
attrs: {
131 +
xmlns: isStacked ? null : 'http://www.w3.org/2000/svg',
132 +
fill: 'currentColor'
133 +
}
116 134
}
117 135
),
118 136
[$inner]
119 137
)
120 138
}
121 -
}
139 +
})
122 140 123 141
/**
124 142
* Icon component generator function
125 143
*
126 144
* @param {string} icon name (minus the leading `BIcon`)
127 -
* @param {string} raw innerHTML for SVG
145 +
* @param {string} raw `innerHTML` for SVG
128 146
* @return {VueComponent}
129 147
*/
130 148
export const makeIcon = (name, content) => {
@@ -137,7 +155,13 @@ export const makeIcon = (name, content) => {
137 155
return Vue.extend({
138 156
name: iconName,
139 157
functional: true,
140 -
props: { ...commonIconProps },
158 +
props: {
159 +
...commonIconProps,
160 +
stacked: {
161 +
type: Boolean,
162 +
default: false
163 +
}
164 +
},
141 165
render(h, { data, props }) {
142 166
return h(
143 167
BVIconBase,
@@ -16,7 +16,11 @@ export const BIcon = /*#__PURE__*/ Vue.extend({
16 16
type: String,
17 17
default: null
18 18
},
19 -
...commonIconProps
19 +
...commonIconProps,
20 +
stacked: {
21 +
type: Boolean,
22 +
default: false
23 +
}
20 24
},
21 25
render(h, { data, props, parent }) {
22 26
const icon = pascalCase(trim(props.icon || '')).replace(RX_ICON_PREFIX, '')
@@ -1,10 +1,9 @@
1 1
// --- BEGIN AUTO-GENERATED FILE ---
2 2
//
3 3
// @IconsVersion: 1.0.0-alpha2
4 -
// @Generated: 2020-01-01T12:00:00.000Z
5 -
//
6 -
// This file is generated on each build. Do not edit this file.
4 +
// @Generated: 2020-01-22T07:06:51.693Z
7 5
//
6 +
// This file is generated on each build. Do not edit this file!
8 7 9 8
import Vue from 'vue'
10 9
import { BvComponent } from '../'
@@ -1,10 +1,10 @@
1 1
// --- BEGIN AUTO-GENERATED FILE ---
2 2
//
3 3
// @IconsVersion: 1.0.0-alpha2
4 -
// @Generated: 2020-01-01T12:00:00.000Z
5 -
//
6 -
// This file is generated on each build. Do not edit this file.
4 +
// @Generated: 2020-01-22T07:06:51.693Z
7 5
//
6 +
// This file is generated on each build. Do not edit this file!
7 + 8 8
/*!
9 9
* BootstrapVue Icons, generated from Bootstrap Icons 1.0.0-alpha2
10 10
*
@@ -0,0 +1,17 @@
1 +
import Vue from '../utils/vue'
2 +
import { mergeData } from 'vue-functional-data-merge'
3 +
import { commonIconProps, BVIconBase } from './helpers/make-icon'
4 + 5 +
// @vue/component
6 +
export const BIconstack = /*#__PURE__*/ Vue.extend({
7 +
name: 'BIconstack',
8 +
functional: true,
9 +
props: { ...commonIconProps },
10 +
render(h, { data, props, children }) {
11 +
return h(
12 +
BVIconBase,
13 +
mergeData(data, { staticClass: 'b-iconstack', props: { ...props, stacked: false } }),
14 +
children
15 +
)
16 +
}
17 +
})
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4