PrismJS VS Code Dark Theme

This blog post is used to test the PrismJS VS Code dark theme that this blog uses.

A lot of attention to detail around JSX, JavaScript, TypeScript and HTML has been carefully crafted to match VS Code. Lot of random ugly hacky CSS is used to handle most of the common uses cases in JSX.

import * as foo from '@foo/bar'
import foo from '@foo/bar'
import { foo } from '@foo/bar'

export default class foo extends something {
  func() {
    // testing
    /* testing */
    const foo = 'bar';
    let bar = true;
    var test = { object: "test" };
    var jar = 2;
    var a = () => { return 'test'; };
    var b = function() { return 'test'; };
    var b = function foo() { return 'test'; };
    return (
      <Test foo={'test'}
          bar={true}
          test={{ object: "test" }}
          jar={2}/>
      <a href="#">Test</a>
    )
  }
}

Release of @mdi/js

Backported to v2.5.94 developers will now have access to MDI through @mdi/js for use in their projects.

We are in the process of writing first party components for each of the main frameworks with the communities help (and updating 3rd party components to use @mdi/js).

A basic example for React would look like below.

import { mdiAccount } from '@mdi/js'

function Icon(props) {
  return (
    <svg viewBox="0 0 24 24"
      style={{ width: '1.5rem' }}>
      <path d={props.path}/>
    </svg>
  )
}

function App(props) {
  return (
    <Icon path={mdiAccount}/>
  )
}

Importing only the icons you need will ensure shaking works out of the box for Webpack and Rollup.

We're in the process of working on the new website and wrapping up the release for v2.6.xx. A helper package @mdi/meta will also be releasing shortly that contains the meta.json from @mdi/svg including all the website's icon data for 3rd party apps.