1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 7x 7x 8x 140x 8x 8x 7x 8x 8x 8x 8x 40x 8x 7x 8x | import is from 'is_js'; const COLOR_SPECS = [{ nameRegexp: /^[A-D]/i, bgFill: '#59295A', // purple textFill: 'white', }, { nameRegexp: /^[E-H]/i, bgFill: '#92205F', // magenta textFill: 'white', }, { nameRegexp: /^[I-L]/i, bgFill: '#DE4C4C', // red textFill: 'white', }, { nameRegexp: /^[M-P]/i, bgFill: '#E9852C', // dark orange textFill: 'white', }, { nameRegexp: /^[Q-T]/i, bgFill: '#FBCB22', // orange textFill: 'black', }, { nameRegexp: /^[U-X]/i, bgFill: '#00773F', // green textFill: 'white', }, { nameRegexp: /^[Y-Z]/i, bgFill: '#1C8FC2', // cyan textFill: 'white', }]; // https://github.com/bhovhannes/svg-url-loader/blob/4bfa8519/index.js /* eslint-disable */ const convertSvgToDataUri = (html) => { let data = html .replace(/\n/g, '') .replace(/"/g, "'") .replace(/\s+/g, " ") .replace(/[{}\|\\\^~\[\]`"<>#%]/g, (match) => '%' + match[0].charCodeAt(0).toString(16).toUpperCase()); data = 'data:image/svg+xml;charset=utf8,' + data.trim(); return data; }; /* eslint-enable */ export const generatePlaceholderSvgXml = (userFirstName, userLastName, forcedBgFill, forcedTextFill) => { const userFirstNameOrEmpty = is.string(userFirstName) && is.not.empty(userFirstName) ? userFirstName : '?'; const userLastNameOrEmpty = is.string(userLastName) && is.not.empty(userLastName) ? userLastName : '?'; const userFirstInitial = userFirstNameOrEmpty.charAt(0).toUpperCase(); const userLastInitial = userLastNameOrEmpty.charAt(0).toUpperCase(); const colorSpec = COLOR_SPECS.find((m) => m.nameRegexp.test(userFirstNameOrEmpty)) || {}; // `dy` ref: http://stackoverflow.com/a/31376501 return `<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="100%" height="100%" fill="${forcedBgFill || colorSpec.bgFill || '#FFF'}" /> <text fill="${forcedTextFill || colorSpec.textFill || '#000'}" font-size="14px" font-weight="bold" font-family="Helvetica" text-anchor="middle" x="50%" y="50%" dy=".35em"> ${userFirstInitial || '?'}${userLastInitial || '?'} </text> </svg>`; }; export const generatePlaceholderSvgDataUri = (userFirstName, userLastName, forcedBgFill, forcedTextFill) => convertSvgToDataUri( generatePlaceholderSvgXml(userFirstName, userLastName, forcedBgFill, forcedTextFill)); export default generatePlaceholderSvgDataUri; |