import * as tinycolor from 'tinycolor2' ; import { Item } from '../types/svgo' ; export const convertSvgToVd = { active : true , type : 'perItem' , fn : convertSvgToVdFn , params : undefined as any , } ; function convertSvgToVdFn ( item ) { if ( item . isElem ( 'svg' ) ) { convertSvgItem ( item ) ; } else if ( item . isElem ( 'g' ) ) { convertGroupItem ( item ) ; } else if ( item . isElem ( 'path' ) ) { convertPathItem ( item ) ; } else { return false ; } return undefined ; } function convertSvgItem ( item ) { item . renameElem ( 'vector' ) ; item . eachAttr ( ( { name , value } ) => { item . removeAttr ( name ) ; switch ( name ) { case 'width' : case 'height' : addAndroidAttr ( item , `${ value }dp` , name ) ; break ; case 'viewBox' : const nums = value . split ( /[ ,]+/g ) ; addAndroidAttr ( item , nums [ 2 ] , 'viewportWidth' ) ; addAndroidAttr ( item , nums [ 3 ] , 'viewportHeight' ) ; break ; case 'opacity' : addAndroidAttr ( item , value , 'alpha' ) ; break ; } } ) ; item . addAttr ( { name : 'xmlns:android' , value : 'http://schemas.android.com/apk/res/android' , prefix : 'xmlns' , local : 'android' , } ) ; } function convertGroupItem ( item ) { item . renameElem ( 'group' ) ; item . eachAttr ( ( { name } ) => { item . removeAttr ( name ) ; } ) ; } function convertPathItem ( item ) { if ( ! item . hasAttr ( 'fill' ) ) { item . addAttr ( { name : 'fill' , value : '#000' , prefix : '' , local : 'fill' } ) ; } if ( ! item . hasAttr ( 'stroke-width' ) && item . hasAttr ( 'stroke' ) && item . attr ( 'stroke' ) . value !== 'none' ) { item . addAttr ( { name : 'stroke-width' , value : '1' , prefix : '' , local : 'stroke-width' , } ) ; } item . eachAttr ( ( { name , value } ) => { item . removeAttr ( name ) ; switch ( name ) { case 'd' : addAndroidAttr ( item , value , 'pathData' ) ; break ; case 'fill' : { const colorValue = convertToAndroidColor ( value ) ; if ( colorValue ) { addAndroidAttr ( item , colorValue , 'fillColor' ) ; } break ; } case 'fill-opacity' : addAndroidAttr ( item , value , 'fillAlpha' ) ; break ; case 'stroke' : { const colorValue = convertToAndroidColor ( value ) ; if ( colorValue ) { addAndroidAttr ( item , colorValue , 'strokeColor' ) ; } break ; } case 'stroke-opacity' : addAndroidAttr ( item , value , 'strokeAlpha' ) ; break ; case 'stroke-width' : addAndroidAttr ( item , value , 'strokeWidth' ) ; break ; case 'stroke-linecap' : addAndroidAttr ( item , value , 'strokeLineCap' ) ; break ; case 'stroke-linejoin' : addAndroidAttr ( item , value , 'strokeLineJoin' ) ; break ; case 'stroke-miterlimit' : addAndroidAttr ( item , value , 'strokeMiterLimit' ) ; break ; case 'fill-rule' : const fillTypeValue = value === 'evenodd' ? 'evenOdd' : 'nonZero' ; addAndroidAttr ( item , fillTypeValue , 'fillType' ) ; break ; } } ) ; } function addAndroidAttr ( item , androidAttrValue , androidAttrLocal ) { item . addAttr ( { name : `android:${ androidAttrLocal }` , value : androidAttrValue , prefix : 'android' , local : androidAttrLocal , } ) ; } function convertToAndroidColor ( svgColor ) { if ( ! svgColor || svgColor === 'none' ) { return undefined ; } const colorInstance = tinycolor ( svgColor ) ; const colorHex = colorInstance . toHex ( ) ; const alphaHex = colorInstance . toHex8 ( ) . substr ( 6 ) ; return '#' + ( alphaHex !== 'ff' ? alphaHex : '' ) + colorHex ; }