Skip to content

Commit 079a560

Browse files
tmorehousetmorehouse
authored
chore(build): export the icons plugin direct from icons/plugin.js (bootstrap-vue#4640)
1 parent b185cdb commit 079a560

File tree

5 files changed

+143
-140
lines changed

5 files changed

+143
-140
lines changed

‎src/icons/helpers/icon-base.js

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import Vue from '../../utils/vue'
2+
import { mergeData } from 'vue-functional-data-merge'
3+
import identity from '../../utils/identity'
4+
import { isUndefinedOrNull } from '../../utils/inspect'
5+
import { toFloat } from '../../utils/number'
6+
7+
// Common icon props (should be cloned/spread before using)
8+
export const commonIconProps = {
9+
variant: {
10+
type: String,
11+
default: null
12+
},
13+
fontScale: {
14+
type: [Number, String],
15+
default: 1
16+
},
17+
scale: {
18+
type: [Number, String],
19+
default: 1
20+
},
21+
rotate: {
22+
type: [Number, String],
23+
default: 0
24+
},
25+
flipH: {
26+
type: Boolean,
27+
default: false
28+
},
29+
flipV: {
30+
type: Boolean,
31+
default: false
32+
},
33+
shiftH: {
34+
type: [Number, String],
35+
default: 0
36+
},
37+
shiftV: {
38+
type: [Number, String],
39+
default: 0
40+
}
41+
}
42+
43+
// Base attributes needed on all icons
44+
const baseAttrs = {
45+
width: '1em',
46+
height: '1em',
47+
viewBox: '0 0 20 20',
48+
focusable: 'false',
49+
role: 'img',
50+
alt: 'icon'
51+
}
52+
53+
// Shared private base component to reduce bundle/runtime size
54+
// @vue/component
55+
export const BVIconBase = /*#__PURE__*/ Vue.extend({
56+
name: 'BVIconBase',
57+
functional: true,
58+
props: {
59+
content: {
60+
type: String
61+
},
62+
stacked: {
63+
type: Boolean,
64+
default: false
65+
},
66+
...commonIconProps
67+
},
68+
render(h, { data, props, children }) {
69+
const fontScale = Math.max(toFloat(props.fontScale) || 1, 0) || 1
70+
const scale = Math.max(toFloat(props.scale) || 1, 0) || 1
71+
const rotate = toFloat(props.rotate) || 0
72+
const shiftH = toFloat(props.shiftH) || 0
73+
const shiftV = toFloat(props.shiftV) || 0
74+
const flipH = props.flipH
75+
const flipV = props.flipV
76+
// Compute the transforms
77+
// Note that order is important as SVG transforms are applied in order from
78+
// left to right and we want flipping/scale to occur before rotation
79+
// Note shifting is applied separately
80+
// Assumes that the viewbox is `0 0 20 20` (`10 10` is the center)
81+
const hasScale = flipH || flipV || scale !== 1
82+
const hasTransforms = hasScale || rotate
83+
const hasShift = shiftH || shiftV
84+
const transforms = [
85+
hasTransforms ? 'translate(10 10)' : null,
86+
hasScale ? `scale(${(flipH ? -1 : 1) * scale} ${(flipV ? -1 : 1) * scale})` : null,
87+
rotate ? `rotate(${rotate})` : null,
88+
hasTransforms ? 'translate(-10 -10)' : null
89+
].filter(identity)
90+
91+
// Handling stacked icons
92+
const isStacked = props.stacked
93+
const hasContent = !isUndefinedOrNull(props.content)
94+
95+
// We wrap the content in a `<g>` for handling the transforms (except shift)
96+
let $inner = h(
97+
'g',
98+
{
99+
attrs: { transform: transforms.join(' ') || null },
100+
domProps: hasContent ? { innerHTML: props.content || '' } : {}
101+
},
102+
children
103+
)
104+
105+
// If needed, we wrap in an additional `<g>` in order to handle the shifting
106+
if (hasShift) {
107+
$inner = h(
108+
'g',
109+
{ attrs: { transform: `translate(${(20 * shiftH) / 16} ${(-20 * shiftV) / 16})` } },
110+
[$inner]
111+
)
112+
}
113+
114+
return h(
115+
'svg',
116+
mergeData(
117+
{
118+
staticClass: 'b-icon bi',
119+
class: { [`text-${props.variant}`]: !!props.variant },
120+
attrs: baseAttrs,
121+
style: isStacked ? {} : { fontSize: fontScale === 1 ? null : `${fontScale * 100}%` }
122+
},
123+
// Merge in user supplied data
124+
data,
125+
// If icon is stacked, null out some attrs
126+
isStacked ? { attrs: { width: null, height: null, role: null, alt: null } } : {},
127+
// These cannot be overridden by users
128+
{
129+
attrs: {
130+
xmlns: isStacked ? null : 'http://www.w3.org/2000/svg',
131+
fill: 'currentColor'
132+
}
133+
}
134+
),
135+
[$inner]
136+
)
137+
}
138+
})

‎src/icons/helpers/make-icon.js

Lines changed: 2 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,7 @@
11
import Vue from '../../utils/vue'
22
import { mergeData } from 'vue-functional-data-merge'
3-
import identity from '../../utils/identity'
4-
import { isUndefinedOrNull } from '../../utils/inspect'
5-
import { toFloat } from '../../utils/number'
63
import { kebabCase, pascalCase, trim } from '../../utils/string'
7-
8-
// Common icon props (should be cloned/spread before using)
9-
export const commonIconProps = {
10-
variant: {
11-
type: String,
12-
default: null
13-
},
14-
fontScale: {
15-
type: [Number, String],
16-
default: 1
17-
},
18-
scale: {
19-
type: [Number, String],
20-
default: 1
21-
},
22-
rotate: {
23-
type: [Number, String],
24-
default: 0
25-
},
26-
flipH: {
27-
type: Boolean,
28-
default: false
29-
},
30-
flipV: {
31-
type: Boolean,
32-
default: false
33-
},
34-
shiftH: {
35-
type: [Number, String],
36-
default: 0
37-
},
38-
shiftV: {
39-
type: [Number, String],
40-
default: 0
41-
}
42-
}
43-
44-
// Base attributes needed on all icons
45-
const baseAttrs = {
46-
width: '1em',
47-
height: '1em',
48-
viewBox: '0 0 20 20',
49-
focusable: 'false',
50-
role: 'img',
51-
alt: 'icon'
52-
}
53-
54-
// Shared private base component to reduce bundle/runtime size
55-
// @vue/component
56-
export const BVIconBase = /*#__PURE__*/ Vue.extend({
57-
name: 'BVIconBase',
58-
functional: true,
59-
props: {
60-
content: {
61-
type: String
62-
},
63-
stacked: {
64-
type: Boolean,
65-
default: false
66-
},
67-
...commonIconProps
68-
},
69-
render(h, { data, props, children }) {
70-
const fontScale = Math.max(toFloat(props.fontScale) || 1, 0) || 1
71-
const scale = Math.max(toFloat(props.scale) || 1, 0) || 1
72-
const rotate = toFloat(props.rotate) || 0
73-
const shiftH = toFloat(props.shiftH) || 0
74-
const shiftV = toFloat(props.shiftV) || 0
75-
const flipH = props.flipH
76-
const flipV = props.flipV
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)
82-
const hasScale = flipH || flipV || scale !== 1
83-
const hasTransforms = hasScale || rotate
84-
const hasShift = shiftH || shiftV
85-
const transforms = [
86-
hasTransforms ? 'translate(10 10)' : null,
87-
hasScale ? `scale(${(flipH ? -1 : 1) * scale} ${(flipV ? -1 : 1) * scale})` : null,
88-
rotate ? `rotate(${rotate})` : null,
89-
hasTransforms ? 'translate(-10 -10)' : null
90-
].filter(identity)
91-
92-
// Handling stacked icons
93-
const isStacked = props.stacked
94-
const hasContent = !isUndefinedOrNull(props.content)
95-
96-
// We wrap the content in a `<g>` for handling the transforms (except shift)
97-
let $inner = h(
98-
'g',
99-
{
100-
attrs: { transform: transforms.join(' ') || null },
101-
domProps: hasContent ? { innerHTML: props.content || '' } : {}
102-
},
103-
children
104-
)
105-
106-
// If needed, we wrap in an additional `<g>` in order to handle the shifting
107-
if (hasShift) {
108-
$inner = h(
109-
'g',
110-
{ attrs: { transform: `translate(${(20 * shiftH) / 16} ${(-20 * shiftV) / 16})` } },
111-
[$inner]
112-
)
113-
}
114-
115-
return h(
116-
'svg',
117-
mergeData(
118-
{
119-
staticClass: 'b-icon bi',
120-
class: { [`text-${props.variant}`]: !!props.variant },
121-
attrs: baseAttrs,
122-
style: isStacked ? {} : { fontSize: fontScale === 1 ? null : `${fontScale * 100}%` }
123-
},
124-
// Merge in user supplied data
125-
data,
126-
// If icon is stacked, null out some attrs
127-
isStacked ? { attrs: { width: null, height: null, role: null, alt: null } } : {},
128-
// These cannot be overridden by users
129-
{
130-
attrs: {
131-
xmlns: isStacked ? null : 'http://www.w3.org/2000/svg',
132-
fill: 'currentColor'
133-
}
134-
}
135-
),
136-
[$inner]
137-
)
138-
}
139-
})
4+
import { commonIconProps, BVIconBase } from './icon-base'
1405

1416
/**
1427
* Icon component generator function
@@ -152,7 +17,7 @@ export const makeIcon = (name, content) => {
15217
const iconNameClass = `bi-${kebabCase(name)}`
15318
const svgContent = trim(content || '')
15419
// Return the icon component definition
155-
return Vue.extend({
20+
return /*#__PURE__*/ Vue.extend({
15621
name: iconName,
15722
functional: true,
15823
props: {

‎src/icons/icon.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Vue from '../utils/vue'
22
import { mergeData } from 'vue-functional-data-merge'
33
import { pascalCase, trim } from '../utils/string'
44
import { BIconBlank } from './icons'
5-
import { commonIconProps } from './helpers/make-icon'
5+
import { commonIconProps } from './helpers/icon-base'
66

77
const RX_ICON_PREFIX = /^BIcon/
88

‎src/icons/iconstack.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from '../utils/vue'
22
import { mergeData } from 'vue-functional-data-merge'
3-
import { commonIconProps, BVIconBase } from './helpers/make-icon'
3+
import { commonIconProps, BVIconBase } from './helpers/icon-base'
44

55
// @vue/component
66
export const BIconstack = /*#__PURE__*/ Vue.extend({

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export { BVToastPlugin } from './components/toast/helpers/bv-toast'
5454

5555
// -- Export Icon components and IconPlugin/BootstrapVueIcons ---
5656
// export * from './icons'
57-
export { IconsPlugin, BootstrapVueIcons } from './icons'
57+
export { IconsPlugin, BootstrapVueIcons } from './icons/plugin'
5858
export { BIcon } from './icons/icon'
5959
export { BIconstack } from './icons/iconstack'
6060
// This re-export is only a single level deep, which

0 commit comments

Comments
 (0)