What is the way to import close Icon in Preact

Question

Is there an equivalent of React Icons for Preact? I want to add a close Icon but I can't find a way to import it in my Preact Project.

Answer 1

If you are using a module bundler like Webpack or parcel, then you can use preact/compat which will allow you to use other React components in your Preact application. So, you can use the same React Icons library. All you have to do is to set the aliases for React as explained here:

// webpack.config.js

module.exports = { 
  // ... other config
 "resolve": { 
   "alias": { 
     "react": "preact/compat",
     "react-dom": "preact/compat",

     // Useful if using React > 17.x.x and Preact > 10.5.x 
     "react/jsx-runtime": "preact/jsx-runtime"
    }
  }
};

Alternately, consider building your own icon system with SVG. It is very trivial. Something like this:

import { cx } from '@emotion/css';

// Base Icon component
export function SVGIcon(props) {

  const { children, width, viewBox, title } = props;

  return (
    <svg
      viewBox={viewBox}
      class={cx('svg-icon', props.class)}
      width={width}>
        {title ? <title>{title}</title> : null}
        {children}
    </svg>
  );
}

// Close icon (SVG copied from remix icons)
export function Close(props) {
  return (
    <SVGIcon {...props} viewBox='0 0 24 24'>
      <path fill='none' d='M0 0h24v24H0z'/>
      <path d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/>
    </SVGIcon>
  );
}