convert-figma-svgs-for-react - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

src/bin.js

package.json

		{
		"name": "convert-figma-svgs-for-react",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "A small script for a very specific use case.",
		@@ -10,3 +10,3 @@ "main": "src/index.js",
		"bin": {
		"convert-figma-svgs-for-react": "./src/index.js"
		"convert-figma-svgs-for-react": "./src/bin.js"
		},
		@@ -13,0 +13,0 @@ "repository": {

src/index.js

		@@ -1,3 +0,62 @@
		const convertFigmaSvgsForReact = require('./convertFigmaSvgsForReact')
		var fs = require('fs')

		module.exports = convertFigmaSvgsForReact
		var replaceExt = require('replace-ext')
		const chalk = require('chalk')

		// This readSvgFiles function is probably available as an NPM package...
		const readSvgFiles = require('./helpers/readSvgFiles.js')
		export const reformatFigmaSvg = require('./helpers/reformatFigmaSvg.js')

		// This is a script to make any SVGs available as modules that export an SVG string.
		// This allows us to inline our SVG and take advantage of CSS styling of said inlined SVGs.
		// It also reformats SVGs exported from Figma, which otherwise would be unsuitable for inline use.
		//
		// An alternative approach might be to mess with create-react-app's webpack loader config,
		// which by default imports .svgs as filepaths for use in `src` attributes,
		// to try to make it import .svgs as flat strings.
		// However, this seems a bit hacky unless we eject from create-react-app, which seems a bit scary.
		// And, it won't fix the Figma export issues
		function handleSvgFile(dirname, filename, content) {
		const svgString = reformatFigmaSvg(content)
		// Strip newlines to prevent JS errors
		const strippedNewlines = svgString.replace(/\n/g, '')
		// Write contents as JS module
		const jsContents = `export default '${strippedNewlines}'`
		const jsFilename = replaceExt(filename, '.js')
		fs.writeFileSync(dirname + jsFilename, jsContents)
		// Celebrate!
		let message = chalk.green('✔')
		message += ' Converted SVG file: '
		message += chalk.green(jsFilename)
		console.log(message)
		}

		function handleSvgFileCount(dirname, count) {
		if (count === 0) {
		console.log(
		chalk.keyword('orange')('No SVG files were found in ' + dirname + ' !')
		)
		} else {
		console.log(chalk.italic.gray('Found ' + count + ' SVG files ...'))
		}
		}

		function handleCompletion() {
		console.log('')
		}

		function handleError(err) {
		console.log(chalk.red('ERR! '))
		console.log(chalk.red(err))
		}

		module.exports = function convertFigmaSvgsForReact(directory) {
		console.log(chalk.italic.gray('Searching ' + directory + ' ...'))
		readSvgFiles(
		directory,
		handleSvgFileCount,
		handleSvgFile,
		handleCompletion,
		handleError
		)
		}

src/convertFigmaSvgsForReact.js

convert-figma-svgs-for-react - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics