+318
-22
lines changedFilter options
+318
-22
lines changed Original file line number Diff line number Diff line change
@@ -120,7 +120,7 @@ Vue.use(BootstrapVueIcons)
120 120
```
121 121 122 122
BootstrapVue icons SCSS/CSS does not depend on any Bootstrap SASS variables, mixins, functions or
123 -
CSS classes (other than the Bootstrap `text-{variant}` variant utility classes, if using the
123 +
CSS classes (other than the Bootstrap `text-{variant}` text color utility classes, if using the
124 124
`variant` prop). Please note that the icons CSS is _also_ included in the main BootstrapVue SCSS/CSS
125 125
files.
126 126
@@ -299,9 +299,9 @@ With the use of Bootstrap's border and background
299 299 300 300
## Transforms
301 301 302 -
BootstrapVue icons provide several props for applying basic CSS transforms to the `<svg>`. All
302 +
BootstrapVue icons provide several props for applying basic SVG transforms to the `<svg>`. All
303 303
transforms can be combined for added effect. Note that the transforms are applied to the `<svg>`
304 -
content, and not the `<svg>` bounding box.
304 +
_content_ and not the `<svg>` bounding box.
305 305 306 306
### Flipping
307 307
@@ -62,35 +62,43 @@ const BVIconBase = {
62 62
...commonIconProps
63 63
},
64 64
render(h, { data, props }) {
65 -
const fontScale = toFloat(props.fontScale) || 1
66 -
const scale = toFloat(props.scale) || 1
65 +
const fontScale = Math.max(toFloat(props.fontScale) || 1, 0) || 1
66 +
const scale = Math.max(toFloat(props.scale) || 1, 0) || 1
67 67
const rotate = toFloat(props.rotate) || 0
68 68
const shiftH = toFloat(props.shiftH) || 0
69 69
const shiftV = toFloat(props.shiftV) || 0
70 70
const flipH = props.flipH
71 71
const flipV = props.flipV
72 -
// Compute the transforms. Note that order is important
73 -
// CSS transforms are applied in order from right to left
74 -
// and we want flipping to occur before rotation, and
75 -
// shifting is applied last
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 +
const hasScale = flipH || flipV || scale !== 1
78 +
const hasTransforms = hasScale || rotate
79 +
const hasShift = shiftH || shiftV
76 80
const transforms = [
77 -
shiftH ? `translateX(${(100 * shiftH) / 16}%)` : null,
78 -
shiftV ? `translateY(${(-100 * shiftV) / 16}%)` : null,
79 -
rotate ? `rotate(${rotate}deg)` : null,
80 -
flipH || flipV || scale !== 1
81 -
? `scale(${(flipH ? -1 : 1) * scale}, ${(flipV ? -1 : 1) * scale})`
82 -
: null
81 +
hasTransforms ? 'translate(10 10)' : null,
82 +
hasScale ? `scale(${(flipH ? -1 : 1) * scale} ${(flipV ? -1 : 1) * scale})` : null,
83 +
rotate ? `rotate(${rotate})` : null,
84 +
hasTransforms ? 'translate(-10 -10)' : null
83 85
].filter(identity)
84 86 85 -
// We wrap the content in a `<g>` for handling the transforms
86 -
const $inner = h('g', {
87 -
style: {
88 -
transform: transforms.join(' ') || null,
89 -
transformOrigin: transforms.length > 0 ? 'center' : null
90 -
},
87 +
// We wrap the content in a `<g>` for handling the transforms (except shift)
88 +
let $inner = h('g', {
89 +
attrs: { transform: transforms.join(' ') || null },
91 90
domProps: { innerHTML: props.content || '' }
92 91
})
93 92 93 +
// If needed, we wrap in an additional `<g>` in order to handle the shifting
94 +
if (hasShift) {
95 +
$inner = h(
96 +
'g',
97 +
{ attrs: { transform: `translate(${(20 * shiftH) / 16} ${(-20 * shiftV) / 16})` } },
98 +
[$inner]
99 +
)
100 +
}
101 + 94 102
return h(
95 103
'svg',
96 104
mergeData(
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