Scaling SVG with height/width/viewBox?

I’m trying to scale my SVG, which has viewBox='0 0 24 23', down to 16 x 16. However, when I change the width/height properties, the icon does not scale down, it just gets clipped off outside of the 16x16 box.

Icon with viewBox='0 0 24 23' andwidth=24andheight=23`:

Icon with viewBox='0 0 24 23' andwidth=16andheight=16`:

Am I missing something here? Here is my code.

import React from 'react'
import Svg, {
  Path
} from 'react-native-svg'

const AlarmIcon = ({width, height, fill, stroke, viewBox, style}) => {
  return (
    <Svg width={width} height={height} viewBox={viewBox} style={style}>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M20.5,16.5V11A8.5,8.5,0,0,0,15,3,3,3,0,0,0,9,3,8.49,8.49,0,0,0,3.5,11v5.5a3,3,0,0,1-3,3h23A3,3,0,0,1,20.5,16.5Z'/>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M15,19.5a3,3,0,0,1-6,0'/>
    </Svg>
  )
}

AlarmIcon.defaultProps = {
  width: 24,
  height: 23,
  stroke: '#fff',
  fill: '#fff',
  viewBox: '0 0 24 23'
}

export default AlarmIcon

[hedgerh]

I managed to get the icon to scale properly by applying scale={width/24} to both of the path elements. Is there a better way to do this, though?

[EskelCz]

Also, the viewbox dimensions should be the original dimensions of the shape.